/* =============================================================================
   ESTILOS PERSONALIZADOS E IMPRESIÓN OFICIAL (PDF)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --brand-navy: #0b1a2d;
  --brand-navy-dark: #060d17;
  --brand-teal: #0d9488;
  --brand-teal-light: #14b8a6;
  --brand-emerald: #10b981;
  --brand-emerald-light: #34d399;
  --brand-cyan: #06b6d4;
  --brand-gradient: linear-gradient(135deg, #0d9488 0%, #10b981 100%);
  --brand-gradient-hover: linear-gradient(135deg, #0f766e 0%, #059669 100%);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
}

/* Clases utilitarias de marca Doctor Pyme */
.bg-brand-navy { background-color: var(--brand-navy); }
.bg-brand-teal { background-color: var(--brand-teal); }
.bg-brand-emerald { background-color: var(--brand-emerald); }
.text-brand-teal { color: var(--brand-teal); }
.text-brand-emerald { color: var(--brand-emerald); }
.border-brand-teal { border-color: var(--brand-teal); }
.bg-brand-gradient { background: var(--brand-gradient); }

.btn-brand {
  background: var(--brand-gradient);
  color: #ffffff;
  transition: all 0.2s ease-in-out;
}
.btn-brand:hover {
  background: var(--brand-gradient-hover);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3);
}

/* Scrollbar estilizado */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* =============================================================================
   OPTIMIZACIÓN DE RENDIMIENTO DE FORMULARIOS Y RENDERIZADO FLUIDO (60 FPS)
   ============================================================================= */

/* Aceleración de digitación de texto en formularios (evita lag de tecleo) */
input, textarea, select {
  text-rendering: optimizeSpeed !important;
  -webkit-font-smoothing: antialiased;
}

/* Aislar capas de modales para evitar repintados costosos de la página al escribir */
#modal-empresa, #modal-riesgo, #modal-pat, #modal-accidente, #modal-doc-vincular, .modal-formulario {
  transform: translateZ(0);
  will-change: opacity;
}

#modal-empresa > div, #modal-riesgo > div, #modal-pat > div, #modal-accidente > div {
  contain: layout style;
}

/* Optimización de listas largas (Estándares Mínimos, Matriz GTC 45, Gestor Documental) */
/* Omite el layout y renderizado de tarjetas fuera del viewport para un scroll y tecleo instantáneos */
.card-estandar-optimizado {
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
}

.fila-matriz-optimizada {
  content-visibility: auto;
  contain-intrinsic-size: 0 48px;
}

/* ESTILOS DE IMPRESIÓN OFICIAL PARA AUDITORÍA Y PDF */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
  }

  /* Ocultar elementos de navegación y botones */
  aside,
  header,
  .no-print,
  button,
  input[type="button"],
  input[type="submit"] {
    display: none !important;
  }

  main {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ajustar tablas al ancho del papel */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  th, td {
    border: 1px solid #cbd5e1 !important;
    padding: 6px 8px !important;
  }

  .page-break-before {
    page-break-before: always;
  }

  .page-break-inside-avoid {
    page-break-inside: avoid;
  }
}

/* =============================================================================
   MODO APP MÓVIL NATIVA (PORTAL OPERARIOS & TRABAJADORES PWA / TWA)
   ============================================================================= */

body.mobile-app-mode {
  background-color: #0b1a2d !important;
  overscroll-behavior-y: contain;
}

/* Ocultar únicamente el menú lateral y la cabecera del panel administrativo de escritorio */
body.mobile-app-mode aside,
body.mobile-app-mode header:not(.worker-mobile-header) {
  display: none !important;
}

/* El encabezado móvil del trabajador siempre debe ser visible, sólido y nítido (sin blur) con soporte de safe-area Android/iOS */
body.mobile-app-mode header.worker-mobile-header,
header.worker-mobile-header {
  display: block !important;
  background-color: #0B111E !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  padding-top: max(env(safe-area-inset-top, 44px), 44px) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mobile-app-mode #app-root {
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100dvh !important;
  min-height: -webkit-fill-available;
  overflow: hidden !important;
  box-sizing: border-box;
}

body.mobile-app-mode #app-root > main {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background-color: #0f172a;
}

.app-content-wrapper,
body.mobile-app-mode main.app-content-wrapper {
  padding-bottom: 96px !important;
  overflow-y: auto !important;
}

.safe-bottom-nav {
  background-color: #0B111E !important;
  height: 72px !important;
  z-index: 50 !important;
  padding-bottom: env(safe-area-inset-bottom, 8px) !important;
}

body.mobile-app-mode #main-content {
  max-width: 100% !important;
  min-height: 100% !important;
}

/* Canvas de Firma Táctil Optimizado para Celular y Escritorio */
.signature-pad-canvas {
  display: block;
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  touch-action: none;
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 2px dashed #94a3b8;
  cursor: crosshair;
  box-sizing: border-box;
}

/* Safe area inset para barras de navegación en iOS / Android */
.safe-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 1rem);
}

/* ==========================================================================
   SIDEBAR COLAPSABLE & TOOLTIPS FLOTANTES (BLOQUE 1)
   ========================================================================== */
aside#app-sidebar {
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

aside#app-sidebar.sidebar-collapsed {
  width: 5rem !important; /* 80px */
}

/* Cabecera del sidebar colapsado: icono grande y prominente de Doctor Pyme */
aside#app-sidebar.sidebar-collapsed .sidebar-header {
  padding: 0.85rem 0.5rem 0.65rem 0.5rem !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

aside#app-sidebar.sidebar-collapsed .sidebar-logo-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  position: relative;
}

/* Mantener el icono cuadrado de Doctor Pyme (la cruz) grande y centrado sin perder tamaño */
aside#app-sidebar.sidebar-collapsed .sidebar-logo-img {
  width: 2.75rem !important; /* 44px x 44px */
  height: 2.75rem !important;
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
  max-width: 2.75rem !important;
  max-height: 2.75rem !important;
  object-fit: contain !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  margin: 0 auto !important;
  display: block !important;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

aside#app-sidebar.sidebar-collapsed .sidebar-logo-container:hover .sidebar-logo-img {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5) !important;
}

/* Tooltip sobre el logotipo al estar colapsado */
aside#app-sidebar.sidebar-collapsed .sidebar-logo-container::after {
  content: "Doctor Pyme";
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background-color: #0b132b;
  color: #34d399;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  border: 1px solid #10b981;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms ease;
  z-index: 100;
}

aside#app-sidebar.sidebar-collapsed .sidebar-logo-container:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Botón toggle centrado debajo del logo en modo colapsado */
aside#app-sidebar.sidebar-collapsed .btn-toggle-sidebar {
  margin: 0.15rem auto 0 auto !important;
  width: 1.85rem !important;
  height: 1.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.5rem !important;
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(51, 65, 85, 0.7) !important;
  color: #94a3b8 !important;
}

aside#app-sidebar.sidebar-collapsed .btn-toggle-sidebar:hover {
  background: rgba(51, 65, 85, 0.9) !important;
  color: #34d399 !important;
  border-color: #10b981 !important;
}

/* Ocultar textos de módulos y encabezados de categorías en modo colapsado */
aside#app-sidebar.sidebar-collapsed .sidebar-text,
aside#app-sidebar.sidebar-collapsed .sidebar-category {
  display: none !important;
}

aside#app-sidebar.sidebar-collapsed .nav-link {
  justify-content: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  position: relative;
}

/* Pie de sidebar colapsado: usuario y logout apilados y centrados */
aside#app-sidebar.sidebar-collapsed .sidebar-footer {
  padding: 0.75rem 0.25rem !important;
}

aside#app-sidebar.sidebar-collapsed .sidebar-footer-user {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 0 !important;
}

aside#app-sidebar.sidebar-collapsed .sidebar-user-info {
  display: none !important;
}

aside#app-sidebar.sidebar-collapsed .sidebar-actions-grid {
  display: none !important;
}

aside#app-sidebar.sidebar-collapsed #btn-logout {
  width: 1.85rem !important;
  height: 1.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important;
  background: rgba(30, 41, 59, 0.5) !important;
  color: #94a3b8 !important;
  position: relative;
}

aside#app-sidebar.sidebar-collapsed #btn-logout:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

/* Tooltip para botón de cerrar sesión colapsado */
aside#app-sidebar.sidebar-collapsed #btn-logout::after {
  content: "Cerrar Sesión";
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background-color: #0b132b;
  color: #f87171;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.5);
  border: 1px solid #7f1d1d;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms ease;
  z-index: 100;
}

aside#app-sidebar.sidebar-collapsed #btn-logout:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Tooltips flotantes en enlaces de navegación del sidebar colapsado */
aside#app-sidebar.sidebar-collapsed .nav-link::after {
  content: attr(data-title);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background-color: #0b132b;
  color: #f8fafc;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  border: 1px solid #334155;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms ease;
  z-index: 100;
}

aside#app-sidebar.sidebar-collapsed .nav-link:hover::after {
  opacity: 1;
  visibility: visible;
}