:root { /* Define variables globales reutilizables para toda la interfaz. */
  --primary: #2f7f5f; /* Define el verde sobrio principal para enlaces, datos productivos y acentos operativos. */
  --primary-dark: #212329; /* Define el carbon profundo para cabeceras y tablas. */
  --primary-bright: #4fb3a4; /* Define el verde agua tecnico para graficas y estados activos. */
  --accent: #d99b29; /* Define el ambar calido para acciones principales y lineas de acento. */
  --bg: #e6e5e0; /* Define el fondo general piedra calido de la plataforma. */
  --surface: #fff; /* Define el blanco para paneles grandes y tablas principales. */
  --card-surface: #f7f6f2; /* Define el piedra muy claro para tarjetas internas tipo Kanban. */
  --surface-soft: #f3f2ee; /* Define un fondo suave para chips y elementos secundarios. */
  --line: #d1d0cb; /* Define bordes grises calidos para separar elementos sin ruido visual. */
  --text: #333; /* Define el color principal de texto. */
  --muted: #7b7c80; /* Define el color de textos secundarios y etiquetas. */
  --ok: #4fb3a4; /* Define el verde agua para estados activos o productivos. */
  --warn: #d99b29; /* Define el ambar para estados en espera o sin actividad reciente. */
  --bad: #c26e4f; /* Define el cobre oxidado para actividad no relacionada o sin reporte reciente. */
  --neutral: #647081; /* Define el gris azulado para estados neutros. */
} /* Cierra el bloque de variables globales. */

* { box-sizing: border-box; } /* Hace que padding y borde cuenten dentro del ancho/alto de cada elemento. */
html { background: var(--bg); width: 100%; } /* Fuerza el fondo raiz del documento y ocupa todo el ancho. */
body { /* Estiliza el cuerpo completo de la pagina. */
  margin: 0; /* Elimina el margen por defecto del navegador. */
  background: var(--bg); /* Aplica fondo crema Taskora a toda la pagina. */
  color: var(--text); /* Aplica el color principal de texto. */
  font-family: "Segoe UI", Arial, sans-serif; /* Define la familia tipografica de toda la plataforma. */
  font-size: 14px; /* Define el tamano base de texto. */
  overflow-x: hidden; /* Evita que tablas o textos largos rompan el ancho visible de la pagina. */
  width: 100%; /* Asegura que el cuerpo use todo el ancho del navegador. */
} /* Cierra los estilos del cuerpo. */

.app-layout { min-height: 100vh; padding-left: 272px; } /* Reserva espacio permanente para el menu lateral en pantallas de escritorio. */
.app-header { /* Estiliza el menu lateral principal de la aplicacion. */
  background: var(--primary-dark); /* Usa fondo carbon corporativo para el sidebar. */
  border-right: 3px solid var(--accent); /* Marca el borde derecho con acento ambar. */
  color: #fff; /* Mantiene textos del sidebar en blanco. */
  display: flex; /* Permite apilar marca y navegacion. */
  flex-direction: column; /* Coloca el logo arriba y las acciones debajo. */
  gap: 18px; /* Separa visualmente marca y menu. */
  height: 100vh; /* Hace que el sidebar ocupe todo el alto visible. */
  inset: 0 auto 0 0; /* Fija el sidebar al lado izquierdo. */
  overflow: hidden; /* Oculta particulas y decoraciones que se salgan del bloque. */
  padding: 22px 16px; /* Da respiracion interna al sidebar. */
  position: fixed; /* Mantiene el menu visible al hacer scroll en el contenido. */
  width: 272px; /* Define ancho estable del sidebar. */
  z-index: 20; /* Mantiene el sidebar por encima del contenido. */
} /* Cierra los estilos del menu lateral. */
.app-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); } /* Dibuja una linea superior ambar como acento de marca. */
.app-header::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(217,155,41,.34) 0 1px, transparent 1.4px); background-position: 18px 12px, 74px 35px; background-size: 96px 54px, 132px 78px; opacity: .35; pointer-events: none; } /* Agrega patron sutil de particulas al sidebar. */
.app-header > * { position: relative; z-index: 1; } /* Mantiene marca y botones por encima de particulas. */
.brand-block { align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; gap: 12px; min-width: 0; padding-bottom: 18px; } /* Agrupa logo, titulo y subtitulo dentro del sidebar. */
.brand-block img { flex: 0 0 auto; height: 44px; width: 44px; } /* Define tamano estable del logo en el sidebar. */
.brand-block div { min-width: 0; } /* Permite cortar subtitulos largos sin romper el sidebar. */
.app-header h1 { font-size: 22px; letter-spacing: 0; margin: 0; overflow-wrap: anywhere; } /* Ajusta el titulo principal del sidebar. */
.app-header p { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.35; margin: 4px 0 0; overflow-wrap: anywhere; } /* Estiliza subtitulo dentro del sidebar con lectura compacta. */
.main-nav { align-content: start; display: grid; gap: 9px; min-height: 0; overflow-y: auto; padding-right: 2px; } /* Organiza enlaces y acciones como lista vertical con scroll si hace falta. */
.main-nav a, .main-nav .nav-button { /* Unifica enlaces y botones del menu lateral. */
  align-items: center; /* Centra contenido verticalmente dentro de cada accion. */
  background: rgba(255,255,255,.045); /* Usa fondo oscuro suave para acciones inactivas. */
  border: 1px solid rgba(255,255,255,.13); /* Aplica borde claro sutil a cada item. */
  border-radius: 8px; /* Redondea cada item del sidebar. */
  color: #f5f5f5; /* Mantiene texto claro. */
  display: flex; /* Permite alinear texto y contador. */
  font-weight: 750; /* Da peso visual a cada accion. */
  justify-content: space-between; /* Separa etiqueta y badge cuando exista. */
  min-height: 40px; /* Define alto estable para items del sidebar. */
  padding: 0 12px; /* Define espacio clicable lateral. */
  text-align: left; /* Alinea textos al inicio. */
  text-decoration: none; /* Quita subrayado de enlaces. */
  width: 100%; /* Hace que cada item ocupe todo el ancho del sidebar. */
} /* Cierra estilos unificados de items del sidebar. */
.main-nav a.active, .main-nav a:hover, .main-nav .nav-button:hover { background: var(--accent); border-color: var(--accent); color: #1d1f24; } /* Resalta item activo o hover con ambar. */
.nav-button { height: 40px; } /* Ajusta botones del sidebar a la misma altura que enlaces. */
.notification-button { display: inline-flex; align-items: center; gap: 8px; } /* Alinea texto y contador de notificaciones en la cabecera. */
#notificationBadge { background: var(--accent); border-radius: 999px; color: #1d1f24; display: inline-flex; font-size: 12px; font-weight: 800; justify-content: center; min-width: 22px; padding: 2px 6px; } /* Muestra contador visible de solicitudes pendientes. */
.nav-period { color: rgba(255,255,255,.82); display: grid; gap: 6px; margin-top: 8px; white-space: normal; } /* Ubica el filtro de periodo como bloque propio dentro del sidebar. */
.nav-period select { border-color: rgba(255,255,255,.35); width: 100%; } /* Hace que el selector de periodo ocupe todo el ancho del sidebar. */

.page { padding: 22px 26px 38px; display: grid; gap: 16px; background: var(--bg); max-width: none; overflow-x: hidden; width: 100%; } /* Define el contenedor principal con espaciado y usa todo el ancho disponible junto al sidebar. */
.page > * { min-width: 0; width: 100%; } /* Fuerza que cada bloque principal estire al ancho del contenedor. */
.notice { /* Estiliza el aviso informativo superior. */
  border: 1px solid var(--line); /* Usa borde gris suave. */
  background: #fff; /* Mantiene el aviso con fondo blanco limpio. */
  color: var(--muted); /* Usa texto secundario para no competir con el contenido principal. */
  border-radius: 6px; /* Redondea suavemente el aviso. */
  padding: 10px 12px; /* Define espacio interno del aviso. */
} /* Cierra estilos del aviso. */
.autonomy-notice { border-left: 4px solid var(--accent); color: var(--text); } /* Resalta el mensaje de autonomia del usuario sin hacerlo parecer una alerta. */
.toolbar-band { /* Estiliza la barra de filtros y acciones. */
  display: flex; /* Coloca filtros y botones en fila. */
  align-items: end; /* Alinea controles por la parte inferior. */
  gap: 10px; /* Separa cada control de la barra. */
  flex-wrap: wrap; /* Permite que los controles bajen de linea en pantallas pequenas. */
  background: #fff; /* Mantiene la barra de herramientas con fondo blanco. */
  border: 1px solid var(--line); /* Aplica borde gris suave. */
  border-radius: 8px; /* Redondea la barra de herramientas. */
  padding: 12px; /* Define espacio interno de la barra. */
} /* Cierra estilos de barra de herramientas. */
label { color: var(--muted); font-size: 12px; font-weight: 650; } /* Estiliza etiquetas de formularios con texto pequeno y secundario. */
select, button, textarea, input, .button-link { /* Agrupa controles de formulario, botones y enlaces con apariencia de boton. */
  border: 1px solid var(--line); /* Aplica borde gris uniforme a controles. */
  border-radius: 6px; /* Redondea controles. */
  background: #fff; /* Usa fondo blanco para inputs y botones base. */
  color: var(--text); /* Usa texto principal dentro de controles. */
  font: inherit; /* Hereda la tipografia global. */
} /* Cierra estilos compartidos de controles. */
select, button, input, .button-link { height: 36px; padding: 0 11px; } /* Define altura y padding horizontal de selects, inputs, botones y enlaces accionables. */
button { /* Estiliza botones en estado normal. */
  cursor: pointer; /* Muestra cursor de accion al pasar por botones. */
  background: #fff; /* Mantiene botones con fondo blanco limpio. */
  border-color: #cfd8e8; /* Usa borde frio y suave para botones. */
  color: var(--primary); /* Usa verde sobrio en el texto del boton. */
  font-weight: 700; /* Hace el texto del boton mas fuerte. */
} /* Cierra estilos de botones. */
button:hover, .button-link:hover { /* Estiliza botones y enlaces accionables al pasar el cursor. */
  background: var(--accent); /* Cambia el fondo al ambar calido para hover. */
  border-color: var(--accent); /* Igual el borde al ambar calido. */
  color: #1d1f24; /* Cambia el texto a oscuro para contraste sobre ambar. */
} /* Cierra estado hover de botones. */
.button-link { align-items: center; display: inline-flex; text-decoration: none; } /* Hace que los enlaces accionables se vean y se comporten como botones compactos. */
textarea { width: 100%; min-height: 150px; padding: 10px; resize: vertical; } /* Hace que areas de texto ocupen todo el ancho, tengan altura minima y puedan crecer verticalmente. */
input { width: 100%; } /* Hace que los inputs llenen el espacio disponible en formularios y tablas de administracion. */

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } /* Crea una grilla de seis tarjetas KPI que ocupa todo el ancho. */
.kpi { /* Estiliza tarjetas KPI como tarjetas tipo tablero. */
  background: var(--surface); /* Mantiene las tarjetas KPI en blanco sobre el fondo crema. */
  border: 1px solid var(--line); /* Usa borde gris suave. */
  border-radius: 8px; /* Redondea contenedores principales. */
  box-shadow: 0 8px 18px rgba(33, 35, 41, .06); /* Agrega sombra sutil carbon para profundidad. */
} /* Cierra estilos de tarjetas KPI. */
.panel, .table-panel { /* Estiliza paneles grandes y tablas. */
  background: var(--surface); /* Mantiene tarjetas de graficas y tablas en blanco. */
  border: 1px solid var(--line); /* Usa borde gris suave. */
  border-radius: 8px; /* Redondea contenedores principales. */
  box-shadow: 0 8px 18px rgba(33, 35, 41, .06); /* Agrega sombra sutil carbon para profundidad. */
} /* Cierra estilos de paneles grandes. */
.kpi { padding: 14px; min-height: 82px; } /* Define espacio interno y altura minima de tarjetas KPI. */
.kpi span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } /* Estiliza la etiqueta de cada KPI. */
.kpi strong { display: block; margin-top: 8px; font-size: 25px; } /* Estiliza el valor principal de cada KPI. */

.productivity-panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } /* Crea paneles ejecutivos para lectura rapida de productividad por periodo. */
.productivity-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 18px rgba(33, 35, 41, .06); padding: 14px; } /* Estiliza cada panel de productividad como tarjeta blanca con sombra suave. */
.productivity-card span { color: var(--muted); display: block; font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } /* Define etiquetas superiores de productividad. */
.productivity-card strong { color: var(--primary-dark); display: block; font-size: 24px; margin-top: 8px; overflow-wrap: anywhere; } /* Resalta el dato principal del panel de productividad. */
.productivity-card p { color: var(--muted); font-size: 13px; line-height: 1.35; margin: 8px 0 0; } /* Muestra notas compactas bajo cada indicador. */
.productivity-card.highlight { border-top: 4px solid var(--ok); } /* Marca el foco productivo con acento verde. */
.productivity-card.attention { border-top: 4px solid var(--bad); } /* Marca el tiempo no relacionado con acento cobre. */
.productivity-ranking-panel { overflow: hidden; } /* Evita desbordes visuales dentro del ranking de productividad. */
.productivity-ranking { display: grid; gap: 10px; padding: 14px; } /* Apila filas del ranking con separacion consistente. */
.productivity-row { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(180px, .9fr) minmax(180px, 1.5fr) 110px; } /* Organiza nombre, barra y valores de cada equipo. */
.productivity-row strong { display: block; overflow-wrap: anywhere; } /* Permite cortar nombres largos de equipos o alias. */
.productivity-meter { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; height: 14px; overflow: hidden; position: relative; } /* Dibuja barra horizontal del foco productivo. */
.productivity-meter span { display: block; height: 100%; left: 0; position: absolute; top: 0; } /* Permite superponer segmentos de productividad. */
.productive-fill { background: var(--ok); z-index: 1; } /* Colorea tramo productivo en verde. */
.unproductive-fill { background: rgba(194, 110, 79, .42); z-index: 2; } /* Colorea tramo no relacionado en cobre translucido. */
.productivity-values { text-align: right; } /* Alinea porcentaje y duracion a la derecha. */
.billable-table { min-width: 920px; } /* Da ancho minimo al resumen facturable para evitar columnas apretadas. */
.billable-progress { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; height: 12px; margin-bottom: 6px; overflow: hidden; } /* Crea barra compacta de avance contra presupuesto. */
.billable-progress span { background: var(--ok); display: block; height: 100%; max-width: 100%; } /* Rellena el avance facturable con verde sobrio. */
.productivity-values span { color: var(--muted); display: block; font-size: 12px; margin-top: 3px; } /* Muestra duracion secundaria del equipo. */

.chart-grid { display: grid; gap: 14px; } /* Define grillas de graficas con separacion uniforme. */
.overview-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Reparte las graficas generales en dos columnas equilibradas. */
.personal-charts { grid-template-columns: 1.2fr .8fr; } /* Da mas ancho a la tendencia laboral en la vista individual. */
.panel > header, .table-panel > header { /* Estiliza cabeceras de paneles y tablas. */
  background: var(--surface); /* Mantiene cabeceras de tarjetas en blanco. */
  color: var(--primary); /* Usa verde sobrio solo en el texto de cabecera. */
  border-bottom: 3px solid var(--accent); /* Agrega una linea ambar discreta como acento corporativo. */
  border-radius: 8px 8px 0 0; /* Redondea solo las esquinas superiores. */
  padding: 12px 14px; /* Define espacio interno de cabecera. */
  font-weight: 750; /* Da peso destacado al texto de cabecera. */
} /* Cierra estilos de cabeceras de panel. */
.chart-box { background: var(--surface); height: 290px; padding: 14px; } /* Define area de graficas con fondo blanco. */
.chart-box canvas { width: 100%; height: 100%; } /* Hace que los canvas ocupen todo el espacio disponible. */

.identity-card { display: grid; grid-template-columns: 1.1fr .8fr .9fr; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 18px rgba(33, 35, 41, .06); padding: 14px; } /* Crea una tarjeta blanca superior para resaltar identidad, alias, proyecto y tipo de vinculo del equipo. */
.identity-card div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; } /* Separa cada bloque de identidad con una subtarjeta blanca. */
.identity-card span { color: var(--muted); display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; } /* Estiliza etiquetas pequenas dentro de la identidad. */
.identity-card strong { color: var(--primary); display: block; font-size: 22px; margin-top: 5px; overflow-wrap: anywhere; } /* Resalta alias y proyecto con verde sobrio y tamano mayor. */
.identity-card p { color: var(--muted); margin: 5px 0 0; } /* Estiliza hostname y area como texto secundario. */
.consent-summary { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 14px; } /* Organiza evidencia de consentimiento en una fila compacta y legible. */
.consent-summary strong { color: var(--primary); font-size: 14px; } /* Resalta la version de consentimiento registrada. */
.consent-summary span { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; } /* Presenta fechas y hash como etiquetas suaves dentro del panel. */
.panel-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px 14px; } /* Alinea acciones internas del panel, como descargas de comprobantes. */
.privacy-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px; } /* Organiza el panel de privacidad en cuatro bloques claros. */
.privacy-grid article { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; } /* Da apariencia de tarjeta blanca a cada bloque de privacidad. */
.privacy-grid strong { color: var(--primary); display: block; margin-bottom: 6px; } /* Resalta el titulo de cada aspecto de privacidad. */
.privacy-grid p { color: var(--muted); margin: 0; overflow-wrap: anywhere; } /* Mantiene descripciones de privacidad compactas y legibles. */

.table-panel { max-width: 100%; overflow-x: auto; } /* Permite scroll horizontal interno en tablas anchas. */
table { width: 100%; min-width: 860px; border-collapse: collapse; } /* Define tablas de ancho completo, minimo legible y sin separacion entre bordes. */
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; } /* Estiliza celdas y permite cortar textos largos. */
th { background: var(--primary-dark); color: #f5f5f5; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--accent); } /* Estiliza encabezados de tabla con fondo carbon y acento ambar. */
.muted { color: var(--muted); font-size: 13px; } /* Define texto secundario pequeno. */
.status { font-weight: 750; } /* Da peso visual a etiquetas de estado. */
.online { color: var(--ok); } /* Colorea estados online en verde. */
.idle { color: var(--warn); } /* Colorea estados inactivos en tono advertencia. */
.offline, .distracting { color: var(--bad); } /* Colorea estados sin reporte reciente o no relacionados en cobre. */
.productive { color: var(--ok); } /* Colorea actividad productiva en verde. */
.neutral { color: var(--neutral); } /* Colorea actividad neutral en gris azulado. */
.pill { /* Estiliza chips o etiquetas pequenas. */
  display: inline-flex; /* Permite alinear contenido dentro del chip. */
  border: 1px solid var(--line); /* Usa borde gris suave en chips. */
  border-radius: 999px; /* Redondea el chip completamente. */
  padding: 3px 8px; /* Define espacio interno del chip. */
  background: #fff; /* Mantiene los chips en blanco para no saturar la interfaz. */
  font-size: 12px; /* Reduce tamano de texto del chip. */
} /* Cierra estilos del chip. */
.agent-status.active { border-color: rgba(79,179,164,.55); color: var(--ok); } /* Muestra agente activo con estado verde. */
.agent-status.revoked, .agent-status.blocked { border-color: rgba(194,110,79,.55); color: var(--bad); } /* Muestra agentes revocados o bloqueados con tono de atencion. */
.agent-status.sin_token { color: var(--muted); } /* Muestra equipos sin token como estado neutro. */

.window-carousel { display: flex; gap: 12px; overflow-x: auto; padding: 14px; } /* Organiza tarjetas de ventanas en fila con scroll horizontal. */
.window-card { /* Estiliza cada tarjeta de ventana abierta. */
  flex: 0 0 275px; /* Define ancho fijo de tarjeta dentro del carrusel. */
  border: 1px solid var(--line); /* Aplica borde gris suave. */
  border-radius: 8px; /* Redondea tarjeta de ventana. */
  background: var(--surface); /* Usa blanco para tarjetas de ventanas sobre el fondo crema. */
  padding: 12px; /* Define espacio interno de la tarjeta de ventana. */
  min-height: 116px; /* Asegura altura minima para contenido de ventana. */
} /* Cierra estilos de tarjeta de ventana. */
.window-card strong { display: block; margin-bottom: 8px; } /* Muestra el proceso de ventana como bloque destacado. */
.window-card .title { color: var(--muted); margin-top: 8px; overflow-wrap: anywhere; } /* Estiliza el titulo de ventana y permite cortar palabras largas. */
.actions { display: flex; gap: 8px; } /* Organiza acciones de tabla en fila. */
.actions a { color: var(--primary); font-weight: 750; } /* Estiliza enlaces de accion con verde principal y peso fuerte. */

.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.36); padding: 18px; z-index: 30; } /* Define overlay de modal centrado y oculto por defecto. */
.modal.open { display: flex; } /* Muestra el modal cuando tiene la clase open. */
.modal-panel { width: min(880px, 100%); max-height: 90vh; overflow: auto; background: var(--surface); border-radius: 8px; } /* Estiliza el contenedor interno del modal con fondo blanco. */
.wide-modal { width: min(1320px, 100%); } /* Amplia modales administrativos que necesitan tablas de asignacion. */
.settings-panel { display: flex; flex-direction: column; max-height: min(760px, 90vh); overflow: hidden; } /* Evita que Ajustes se convierta en una pagina larga dentro del modal. */
.small-modal { width: min(430px, 100%); } /* Reduce modales simples como descarga de reportes. */
.modal-panel header { background-color: var(--primary-dark); background-image: radial-gradient(circle, rgba(255,255,255,.62) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(255,255,255,.24) 0 1px, transparent 1.4px); background-position: 16px 10px, 62px 28px; background-size: 92px 48px, 124px 64px; border-bottom: 2px solid var(--accent); color: #fff; padding: 14px 16px; font-weight: 750; position: sticky; top: 0; z-index: 3; } /* Estiliza cabecera del modal y la mantiene visible al hacer scroll dentro del popup. */
.modal-panel footer { background: var(--surface); bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); position: sticky; z-index: 3; } /* Estiliza pie del modal y mantiene Guardar/Cerrar accesibles en modales largos. */
.modal-panel > label { display: block; padding: 16px; } /* Da respiracion a etiquetas directas dentro de modales pequenos. */
.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; } /* Organiza campos de configuracion en dos columnas. */
.admin-grid { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 16px; padding: 16px; } /* Organiza areas, proyectos, periodo sugerido y retencion en columnas administrativas diferenciadas. */
.settings-grid { align-items: start; flex: 1; grid-auto-rows: minmax(190px, auto); overflow: auto; padding-bottom: 18px; } /* Permite scroll general corto si la pantalla no alcanza, sin estirar tarjetas. */
.admin-management-grid { grid-template-columns: minmax(260px, 420px) minmax(320px, 1fr); } /* Divide administracion entre invitacion y onboarding guiado. */
.clients-grid { grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr); } /* Distribuye creacion de empresa y accesos administrativos en dos columnas claras. */
.admin-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px; } /* Estiliza cada bloque administrativo como panel compacto. */
.clients-grid .admin-card { align-content: start; min-height: auto; } /* Evita que los formularios de clientes se estiren mas de lo necesario. */
.clients-grid label { display: grid; gap: 6px; margin-bottom: 8px; } /* Apila etiqueta y campo para que los formularios queden limpios. */
.clients-grid button { min-height: 36px; } /* Mantiene acciones de clientes proporcionadas sin botones gigantes. */
.settings-grid .admin-card { display: flex; flex-direction: column; max-height: 260px; min-height: 190px; overflow: hidden; } /* Da altura controlada a cada tarjeta de Ajustes. */
.task-card label { display: grid; gap: 6px; margin-bottom: 10px; } /* Ordena selector de proyecto y tareas sin apretar el bloque. */
.settings-grid .schedule-card { max-height: none; overflow: visible; } /* Permite que tarjetas de horario y retencion usen su altura natural compacta. */
.admin-card-title { color: var(--primary); font-weight: 800; margin-bottom: 10px; } /* Resalta el titulo de cada bloque administrativo. */
.admin-section { padding: 0 16px 16px; } /* Separa secciones administrativas secundarias dentro del modal. */
.admin-section-title { color: var(--primary); font-weight: 800; margin: 2px 0 10px; } /* Da titulo compacto a tablas internas de administracion. */
.schedule-card { display: grid; gap: 10px; } /* Apila controles de horario para que inicio y fin queden uno debajo del otro. */
.field-label { color: var(--muted); font-size: 12px; font-weight: 650; margin-bottom: 6px; } /* Crea etiqueta reusable para grupos que no usan label directo. */
.tag-list { align-content: start; display: flex; flex-wrap: wrap; gap: 8px; min-height: 88px; } /* Muestra areas y proyectos como chips flexibles. */
.settings-grid .tag-list { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; } /* Hace scroll dentro de cada lista de chips para no alargar el modal. */
.tag-chip { align-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--text); display: inline-flex; gap: 8px; height: auto; min-height: 32px; padding: 5px 9px; } /* Estiliza cada chip de area o proyecto en blanco. */
.tag-chip strong { color: var(--bad); font-size: 13px; line-height: 1; } /* Resalta la x de eliminar chip en rojo discreto. */
.budget-list { display: grid; gap: 8px; min-height: 0; overflow: auto; padding-right: 4px; } /* Lista presupuestos por proyecto con scroll interno. */
.budget-row { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 110px; } /* Ordena nombre de proyecto e input de horas. */
.budget-row span { font-weight: 750; overflow-wrap: anywhere; } /* Mantiene nombres largos legibles dentro del cuadro. */
.budget-row input { min-width: 0; } /* Evita que el input de horas ensanche la tarjeta. */
.onboarding-card { min-height: 100%; } /* Mantiene el bloque de onboarding alineado con el formulario de invitacion. */
.onboarding-steps { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Muestra los pasos principales del flujo de invitacion en una sola fila. */
.onboarding-steps article { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px; } /* Crea tarjetas pequenas para cada paso del onboarding. */
.onboarding-steps span { align-items: center; background: var(--accent); border-radius: 999px; color: #1d1f24; display: inline-flex; font-weight: 800; height: 26px; justify-content: center; width: 26px; } /* Dibuja el numero del paso con acento ambar. */
.onboarding-steps strong { color: var(--primary); display: block; margin-top: 8px; } /* Resalta el nombre de cada paso. */
.onboarding-steps p { color: var(--muted); margin: 4px 0 0; } /* Mantiene descripcion de cada paso compacta. */
.onboarding-summary { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; } /* Resume el avance del onboarding con tres metricas. */
.onboarding-summary div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px; } /* Estiliza cada metrica de onboarding como tarjeta blanca. */
.onboarding-summary strong { color: var(--text); display: block; font-size: 22px; } /* Destaca el numero de cada metrica. */
.onboarding-summary span, .onboarding-summary p { color: var(--muted); margin: 0; } /* Da tono secundario a etiquetas y ultima invitacion. */
.onboarding-summary p { grid-column: 1 / -1; } /* Hace que el texto de ultima invitacion ocupe todo el ancho. */
.inline-add { display: grid; gap: 8px; grid-template-columns: 1fr auto; margin-top: 12px; } /* Coloca campo de agregar y boton en una misma fila. */
.day-picker { display: flex; flex-wrap: wrap; gap: 8px; } /* Organiza los dias laborales como botones seleccionables. */
.day-chip { background: #fff; border-color: var(--line); color: var(--primary); min-width: 46px; } /* Estiliza cada dia cuando no esta seleccionado. */
.day-chip.selected { background: var(--accent); border-color: var(--accent); color: #1d1f24; } /* Marca dias activos con ambar calido. */
.table-scroll { max-width: 100%; overflow-x: auto; padding: 0 16px 16px; } /* Permite desplazamiento horizontal interno en tablas dentro de modales. */
.compact-scroll { border: 1px solid var(--line); border-radius: 8px; padding: 0; } /* Encierra tablas compactas dentro de administracion sin agregar otro card pesado. */
.security-table { min-width: 1080px; table-layout: fixed; } /* Da ancho estable a tablas de empresas y accesos para evitar columnas aplastadas. */
.company-security-table th:nth-child(1), .company-security-table td:nth-child(1) { width: 34%; } /* Reserva ancho suficiente para el nombre editable de empresa. */
.company-security-table th:nth-child(2), .company-security-table td:nth-child(2) { width: 16%; } /* Reserva espacio al ID interno de empresa. */
.company-security-table th:nth-child(3), .company-security-table td:nth-child(3) { width: 20%; } /* Reserva espacio a fecha de creacion. */
.company-security-table th:nth-child(4), .company-security-table td:nth-child(4) { width: 30%; } /* Reserva espacio amplio para estado y acciones de empresa. */
.access-security-table { min-width: 1220px; } /* Amplia la tabla de accesos administrativos para que clave y acciones no se compriman. */
.access-security-table th:nth-child(1), .access-security-table td:nth-child(1) { width: 18%; } /* Reserva ancho al correo del administrador de empresa. */
.access-security-table th:nth-child(2), .access-security-table td:nth-child(2) { width: 15%; } /* Reserva ancho al rol administrativo. */
.access-security-table th:nth-child(3), .access-security-table td:nth-child(3) { width: 20%; } /* Reserva ancho a selector de empresa. */
.access-security-table th:nth-child(4), .access-security-table td:nth-child(4) { width: 17%; } /* Reserva ancho al campo de nueva clave. */
.access-security-table th:nth-child(5), .access-security-table td:nth-child(5) { width: 8%; } /* Mantiene estado compacto. */
.access-security-table th:nth-child(6), .access-security-table td:nth-child(6) { width: 10%; } /* Mantiene fecha de actualizacion legible. */
.access-security-table th:nth-child(7), .access-security-table td:nth-child(7) { width: 12%; } /* Reserva espacio para acciones administrativas. */
.security-table th { white-space: nowrap; } /* Evita que encabezados como estado o actualizado se partan en varias lineas. */
.security-table input, .security-table select { width: 100%; min-width: 0; } /* Hace que controles ocupen su columna sin salirse. */
.password-cell input { min-width: 190px; } /* Asegura que el placeholder de clave sea legible. */
.row-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* Ordena botones internos en fila con salto controlado. */
.row-actions button { white-space: nowrap; } /* Evita que textos de botones se rompan. */
.danger-button { border-color: rgba(194,110,79,.55); color: var(--bad); } /* Marca acciones destructivas con tono de atencion sin saturar. */
.nowrap { white-space: nowrap; } /* Evita saltos en IDs, fechas cortas y estados. */
.user-cell strong { overflow-wrap: anywhere; } /* Permite cortar correos largos sin romper el ancho de tabla. */
.entity-list { display: grid; gap: 10px; max-height: 280px; overflow: auto; padding-right: 4px; } /* Muestra empresas y accesos como lista con scroll interno para muchos registros. */
.entity-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 12px; grid-template-columns: minmax(240px, 1.1fr) minmax(300px, 1.4fr); padding: 12px; } /* Reemplaza tablas anchas por tarjetas administrativas compactas. */
.entity-main, .entity-controls { min-width: 0; } /* Permite que textos largos se ajusten dentro de la tarjeta. */
.entity-main label, .entity-controls label { color: var(--muted); display: grid; font-size: 12px; font-weight: 700; gap: 6px; margin: 0; } /* Uniforma labels internos de tarjetas. */
.entity-title, .entity-main strong { color: var(--text); overflow-wrap: anywhere; } /* Mantiene correos y nombres largos dentro de su columna. */
.entity-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* Agrupa ID, fecha y estado en chips compactos. */
.entity-meta span { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 2px; min-width: 118px; padding: 7px 9px; } /* Estiliza cada metadato como ficha pequena. */
.entity-meta small, .audit-resource small, .audit-details small { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; } /* Da jerarquia visual a etiquetas secundarias. */
.entity-meta strong { color: var(--text); font-size: 12px; font-weight: 750; overflow-wrap: anywhere; } /* Muestra valores de metadatos sin romper el layout. */
.entity-controls { align-items: end; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(150px, 1fr)) auto; } /* Ordena selectores y acciones de empresa en columnas controladas. */
.access-controls { grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; } /* Da espacio al rol, empresa, clave y acciones de accesos administrativos. */
.entity-controls input, .entity-controls select, .entity-main input { min-width: 0; width: 100%; } /* Evita que inputs o selects ensanchen la tarjeta. */
.entity-actions { align-self: end; justify-content: flex-end; margin-top: 0; } /* Alinea botones al final de la tarjeta sin ocupar una fila completa innecesaria. */
.entity-actions button { min-height: 34px; padding: 7px 10px; } /* Reduce botones internos para que coincidan con la accion administrativa. */
.empty-state { border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); padding: 14px; text-align: center; } /* Presenta estados vacios sin tablas ni espacios muertos. */
.invitation-status.linked { border-color: rgba(79,179,164,.55); color: var(--ok); } /* Marca invitaciones vinculadas en verde. */
.invitation-status.invited, .invitation-status.sent { border-color: rgba(217,155,41,.65); color: #8a650e; } /* Marca invitaciones pendientes con ambar institucional. */
#reportsBody { padding: 16px; display: grid; gap: 12px; } /* Da espacio y separacion al contenido del reporte. */
.screenshot-viewer { display: grid; gap: 16px; grid-template-columns: 320px 1fr; padding: 16px; } /* Organiza miniaturas y previsualizacion de capturas en dos columnas. */
.screenshot-grid { align-content: start; display: grid; gap: 10px; max-height: 70vh; overflow: auto; } /* Muestra miniaturas con scroll vertical. */
.screenshot-thumb { background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--text); display: grid; gap: 6px; height: auto; padding: 8px; text-align: left; } /* Estiliza cada miniatura de captura como tarjeta clicable. */
.screenshot-thumb.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(217,155,41,.28); } /* Resalta la captura seleccionada con ambar calido. */
.screenshot-thumb img { border-radius: 6px; display: block; width: 100%; } /* Ajusta la imagen miniatura al ancho disponible. */
.screenshot-thumb span { color: var(--muted); font-size: 12px; } /* Estiliza la fecha bajo cada miniatura. */
.screenshot-preview { align-content: start; display: grid; gap: 10px; } /* Organiza la imagen grande y sus metadatos. */
.screenshot-preview img { background: #fff; border: 1px solid var(--line); border-radius: 8px; max-height: 70vh; object-fit: contain; width: 100%; } /* Muestra la captura grande sin deformarla. */
.screenshot-actions { display: flex; gap: 8px; justify-content: flex-end; } /* Alinea acciones de revision o solicitud de eliminacion de capturas. */
.delete-requested { color: var(--bad); font-weight: 700; } /* Resalta capturas con solicitud de eliminacion pendiente. */
.notifications-list { display: grid; gap: 10px; padding: 16px; } /* Organiza tarjetas de notificaciones dentro del modal. */
.notification-item { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; padding: 12px; } /* Estiliza cada notificacion como tarjeta blanca. */
.notification-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; } /* Alinea titulo y estado de cada solicitud administrativa. */
.notification-item strong { color: var(--primary); } /* Resalta el titulo de cada notificacion. */
.notification-item textarea { min-height: 82px; } /* Da espacio suficiente a la respuesta del administrador sin alargar demasiado el modal. */
.notification-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } /* Ordena acciones de revision de notificaciones. */
.request-list { display: grid; gap: 10px; padding: 14px; } /* Organiza el historial de solicitudes visibles para el usuario. */
.request-item { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; display: grid; gap: 7px; padding: 12px; } /* Presenta cada solicitud del usuario como tarjeta trazable y legible. */
.request-item > div { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; } /* Ordena titulo y estado dentro de cada solicitud. */
.request-item p { margin: 0; overflow-wrap: anywhere; } /* Evita que mensajes largos rompan la tarjeta. */
.request-response { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; } /* Resalta la respuesta enviada por el administrador. */
.request-status.requested { border-color: rgba(217,155,41,.65); color: #8a650e; } /* Marca solicitudes pendientes con ambar. */
.request-status.in_review { border-color: rgba(100,112,129,.55); color: var(--neutral); } /* Marca solicitudes en revision con gris sobrio. */
.request-status.reviewed, .request-status.resolved, .request-status.deleted { border-color: rgba(79,179,164,.55); color: var(--ok); } /* Marca solicitudes atendidas con verde. */
.timesheet-note { min-height: 70px; min-width: 180px; } /* Permite escribir una nota breve al aprobar o devolver un timesheet. */
.timesheet-status.draft { color: var(--muted); } /* Muestra timesheets generados aun sin revision como borrador. */
.timesheet-status.submitted { border-color: rgba(217,155,41,.65); color: #8a650e; } /* Marca timesheets enviados a revision con ambar. */
.timesheet-status.approved { border-color: rgba(79,179,164,.55); color: var(--ok); } /* Marca timesheets aprobados con verde. */
.timesheet-status.returned { border-color: rgba(194,110,79,.55); color: var(--bad); } /* Marca timesheets devueltos con tono de atencion. */
.audit-modal-panel { width: min(960px, 100%); } /* Reduce el modal de auditoria para que no desperdicie ancho horizontal. */
.audit-list { display: grid; gap: 8px; max-height: calc(90vh - 118px); overflow: auto; padding: 14px 16px; } /* Organiza auditoria con scroll interno y altura contenida. */
.audit-item { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; display: grid; gap: 12px; grid-template-columns: 110px minmax(0, 1fr); padding: 10px 12px; } /* Convierte cada evento en fila de trazabilidad compacta. */
.audit-time { align-content: start; color: var(--muted); display: grid; gap: 3px; } /* Agrupa fecha y hora en una columna estrecha. */
.audit-time strong { color: var(--text); font-size: 12px; } /* Resalta la fecha sin competir con la accion. */
.audit-time span { font-size: 12px; } /* Mantiene la hora discreta. */
.audit-body { display: grid; gap: 7px; min-width: 0; } /* Contiene accion, recurso y detalles sin desbordes. */
.audit-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; } /* Ubica accion y actor en la misma linea cuando hay espacio. */
.audit-heading strong { color: var(--primary); font-size: 14px; } /* Resalta el nombre humano de la accion auditada. */
.audit-heading span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } /* Muestra actor sin romper la fila. */
.audit-resource { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } /* Muestra tipo y recurso auditado en una linea compacta. */
.audit-resource span { color: var(--text); font-weight: 700; overflow-wrap: anywhere; } /* Destaca el recurso auditado. */
.audit-details { display: flex; flex-wrap: wrap; gap: 6px; } /* Convierte detalles en chips para lectura rapida. */
.audit-details span { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; display: inline-grid; gap: 2px; max-width: 100%; padding: 5px 8px; } /* Presenta cada detalle como chip compacto. */
.audit-details span { overflow-wrap: anywhere; } /* Permite cortes seguros en detalles largos sin romper la tarjeta. */
.request-form { display: grid; gap: 12px; padding: 16px; } /* Organiza campos de solicitudes creadas por el usuario. */

.auth-page { min-height: 100vh; } /* Hace que la pantalla de ingreso ocupe todo el alto disponible. */
.auth-shell { align-items: center; background: var(--bg); display: flex; justify-content: center; min-height: 100vh; padding: 24px; } /* Centra la tarjeta de autenticacion sobre el fondo crema. */
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px rgba(33, 35, 41, .14); max-width: 440px; overflow: hidden; width: 100%; } /* Define la tarjeta blanca de login con sombra suave. */
.auth-brand { background: var(--primary-dark); border-bottom: 3px solid var(--accent); color: #fff; overflow: hidden; padding: 24px; position: relative; } /* Aplica la franja carbon y ambar al encabezado del login. */
.auth-brand::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(255,255,255,.28) 0 1px, transparent 1.4px); background-position: 12px 14px, 55px 31px; background-size: 88px 50px, 120px 70px; opacity: .4; pointer-events: none; } /* Agrega particulas suaves al encabezado del login. */
.auth-brand > * { position: relative; z-index: 1; } /* Mantiene el contenido del login por encima de las particulas. */
.auth-logo { display: block; height: 52px; margin-bottom: 14px; width: 52px; } /* Muestra el logo de Taskora en el encabezado del login. */
.auth-brand span { color: var(--accent); display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; margin-bottom: 10px; text-transform: uppercase; } /* Muestra la marca sobre el titulo del login. */
.auth-brand h1 { font-size: 25px; margin: 0; } /* Define el titulo principal del login. */
.auth-brand p { color: rgba(255,255,255,.82); line-height: 1.45; margin: 10px 0 0; } /* Estiliza el texto de apoyo del login. */
.auth-form { display: grid; gap: 14px; padding: 22px; } /* Organiza campos y boton del formulario de ingreso. */
.auth-form label { display: grid; gap: 7px; } /* Apila etiqueta e input en cada campo del login. */
.auth-form button { background: var(--accent); border-color: var(--accent); color: #1d1f24; } /* Usa ambar calido para la accion principal de ingreso. */
.auth-switch { border-top: 1px solid var(--line); padding: 14px 22px 20px; text-align: center; } /* Separa el cambio entre login admin y login usuario. */
.auth-switch a { color: var(--primary); display: inline-block; font-weight: 750; margin: 0 8px 6px; } /* Estiliza enlaces de cambio de modo y regreso al inicio. */
.auth-error { margin: 16px 22px 0; } /* Da margen al mensaje de error del login. */
.auth-info { border-left: 4px solid var(--primary-bright); margin: 16px 22px 0; } /* Da margen y acento al mensaje de codigo enviado. */
.auth-note { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; padding: 10px; } /* Explica el estado actual del acceso de usuario sin saturar el formulario. */

.landing-page { background: var(--bg); min-height: 100vh; } /* Define la portada publica sobre fondo crema corporativo. */
.landing-hero { background: var(--primary-dark); border-bottom: 3px solid var(--accent); color: #fff; min-height: 430px; overflow: hidden; padding: 22px 28px 64px; position: relative; } /* Crea la cabecera publica con fondo carbon y acento ambar. */
.landing-hero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 180px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(217,155,41,.08)); } /* Dibuja un brillo ambar muy suave en la portada. */
.landing-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(217,155,41,.16) 0 1px, transparent 1.5px); background-position: 20px 18px, 42px 92px; background-size: 148px 86px, 180px 120px; opacity: .35; pointer-events: none; } /* Deja una capa estatica sutil de respaldo si el canvas no carga. */
.landing-particles { height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; z-index: 0; } /* Dibuja particulas animadas livianas detras del contenido de portada. */
.landing-nav, .landing-copy { position: relative; z-index: 1; } /* Mantiene navegacion y texto por encima de las olas. */
.landing-nav { align-items: center; display: flex; justify-content: space-between; gap: 16px; } /* Distribuye marca y accesos en la parte superior de la portada. */
.landing-nav strong { font-size: 20px; } /* Da presencia a la marca en la portada. */
.brand-inline { align-items: center; display: inline-flex; gap: 10px; } /* Alinea logo y nombre de marca en menus publicos. */
.brand-inline img { height: 36px; width: 36px; } /* Define tamano del logo en la portada y politica. */
.landing-nav div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } /* Agrupa enlaces superiores de acceso. */
.landing-nav a { border: 1px solid rgba(255,255,255,.28); border-radius: 6px; color: #fff; font-weight: 750; padding: 8px 12px; text-decoration: none; } /* Estiliza accesos superiores en la portada. */
.landing-nav a:hover { background: var(--accent); border-color: var(--accent); color: #1d1f24; } /* Resalta accesos superiores con ambar al pasar el cursor. */
.landing-copy { max-width: 740px; padding-top: 82px; } /* Limita el ancho del texto principal de portada. */
.landing-copy span { color: var(--accent); display: block; font-size: 13px; font-weight: 850; letter-spacing: .08em; margin-bottom: 12px; text-transform: uppercase; } /* Muestra la categoria de la plataforma. */
.landing-copy h1 { font-size: 54px; letter-spacing: 0; line-height: 1.04; margin: 0; } /* Define el titulo principal de portada con tamano fijo y alto impacto. */
.landing-copy p { color: rgba(255,255,255,.84); font-size: 17px; line-height: 1.55; max-width: 660px; } /* Estiliza descripcion principal de portada. */
.landing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } /* Agrupa acciones principales de portada. */
.landing-actions a { border-radius: 7px; font-weight: 800; padding: 12px 16px; text-decoration: none; } /* Estiliza botones principales de portada. */
.landing-primary { background: var(--accent); color: #1d1f24; } /* Usa ambar calido para accion principal. */
.landing-secondary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); color: #fff; } /* Usa boton secundario transparente sobre carbon. */
.landing-main { padding: 24px 28px 42px; } /* Define el area inferior de la portada. */
.landing-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(220px, 1fr)); margin: -54px auto 0; max-width: 1180px; position: relative; z-index: 2; } /* Muestra tres tarjetas blancas sobre el fondo crema. */
.landing-grid article { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 34px rgba(33, 35, 41, .1); padding: 20px; } /* Estiliza tarjetas descriptivas de la portada. */
.landing-grid h2 { color: var(--primary); font-size: 18px; margin: 0 0 10px; } /* Resalta titulos de beneficios. */
.landing-grid p { color: var(--muted); line-height: 1.5; margin: 0; } /* Estiliza texto de beneficios. */
.policy-hero { min-height: 330px; } /* Reduce altura de la cabecera en paginas documentales. */
.policy-main { display: grid; gap: 14px; margin: -48px auto 0; max-width: 980px; position: relative; z-index: 2; } /* Centra las secciones de politica sobre el fondo general. */
.policy-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 26px rgba(33,35,41,.08); padding: 20px; } /* Estiliza cada bloque de politica como tarjeta legible. */
.policy-card h2 { color: var(--primary); font-size: 18px; margin: 0 0 8px; } /* Resalta titulos de politica con verde sobrio. */
.policy-card p { color: var(--text); line-height: 1.6; margin: 0; } /* Mejora lectura de textos legales cortos. */

@media (max-width: 1100px) { /* Ajusta layout para pantallas medianas. */
  .app-layout { padding-left: 0; } /* Quita reserva lateral cuando el menu se vuelve superior. */
  .app-header { border-bottom: 3px solid var(--accent); border-right: 0; height: auto; inset: auto; position: relative; width: 100%; } /* Convierte el sidebar en cabecera superior para pantallas medianas. */
  .main-nav { grid-template-columns: repeat(2, minmax(150px, 1fr)); overflow: visible; } /* Ordena acciones en dos columnas en pantallas medianas. */
  .nav-period { grid-column: 1 / -1; } /* Hace que el filtro de periodo ocupe una fila completa. */
  .kpi-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); } /* Cambia KPIs a tres columnas en pantallas medianas. */
  .productivity-panels { grid-template-columns: repeat(2, minmax(160px, 1fr)); } /* Reorganiza paneles de productividad en dos columnas para pantallas medianas. */
  .productivity-row { grid-template-columns: 1fr; } /* Apila contenido del ranking para evitar desbordes en pantallas medianas. */
  .productivity-values { text-align: left; } /* Alinea valores del ranking a la izquierda cuando la fila se apila. */
  .overview-charts, .personal-charts { grid-template-columns: 1fr; } /* Apila graficas en una columna. */
  .admin-grid, .identity-card { grid-template-columns: 1fr; } /* Apila administracion e identidad en pantallas medianas. */
  .entity-card { grid-template-columns: 1fr; } /* Apila tarjetas de empresas y accesos en pantallas medianas. */
  .entity-controls, .access-controls { grid-template-columns: repeat(2, minmax(150px, 1fr)); } /* Reordena controles internos sin generar scroll horizontal. */
  .entity-actions { justify-content: flex-start; } /* Lleva acciones a la izquierda cuando las tarjetas se apilan. */
  .privacy-grid, .onboarding-steps, .onboarding-summary { grid-template-columns: 1fr; } /* Apila privacidad y onboarding para evitar columnas estrechas. */
  .screenshot-viewer { grid-template-columns: 1fr; } /* Apila miniaturas y vista grande en pantallas medianas. */
  .landing-grid { grid-template-columns: 1fr; } /* Apila tarjetas de portada en pantallas pequenas. */
  .landing-copy h1 { font-size: 36px; } /* Reduce el titulo de portada en pantallas medianas o pequenas. */
} /* Cierra media query de pantallas medianas. */
@media (max-width: 720px) { /* Ajusta layout para moviles. */
  .app-header { padding: 18px 14px; } /* Reduce padding del menu superior en moviles. */
  .main-nav { grid-template-columns: 1fr; } /* Apila acciones del menu en una sola columna movil. */
  .page { padding: 14px; } /* Reduce padding general en moviles. */
  .kpi-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); } /* Muestra KPIs en dos columnas en moviles. */
  .productivity-panels { grid-template-columns: 1fr; } /* Apila paneles de productividad en moviles. */
  .config-grid { grid-template-columns: 1fr; } /* Muestra configuracion en una sola columna en moviles. */
  .entity-controls, .access-controls { grid-template-columns: 1fr; } /* Apila todos los controles administrativos en moviles. */
  .audit-item { grid-template-columns: 1fr; } /* Apila fecha y detalle de auditoria en moviles. */
} /* Cierra media query de moviles. */