: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 Toscana 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-header { /* Estiliza la cabecera principal de la aplicacion. */
  display: flex; /* Organiza titulo y menu en una fila flexible. */
  flex-wrap: wrap; /* Permite que el menu baje de linea si no cabe en pantallas medianas. */
  justify-content: space-between; /* Separa el titulo a la izquierda y el menu a la derecha. */
  align-items: center; /* Centra verticalmente los elementos de la cabecera. */
  gap: 16px; /* Agrega espacio entre bloques de la cabecera. */
  padding: 18px 24px; /* Define espacio interno superior/inferior y lateral. */
  background: var(--primary-dark); /* Aplica una cabecera carbon sobria para diferenciar la marca de paletas azules externas. */
  color: #fff; /* Hace que el texto de la cabecera sea blanco. */
  overflow: hidden; /* Oculta las curvas decorativas que se salen de la cabecera. */
  position: relative; /* Permite ubicar las olas decorativas dentro de la cabecera. */
} /* Cierra los estilos de cabecera. */
.app-header::before { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--accent); } /* Dibuja una linea ambar inferior 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(255,255,255,.32) 0 1px, transparent 1.4px); background-position: 18px 12px, 74px 35px; background-size: 96px 54px, 132px 78px; opacity: .45; pointer-events: none; } /* Agrega un patron sutil de particulas sobre la cabecera oscura. */
.app-header > * { position: relative; z-index: 1; } /* Mantiene titulo, subtitulo y menu por encima de las olas. */
.brand-block { align-items: center; display: flex; gap: 12px; min-width: 220px; } /* Agrupa logo, titulo y subtitulo de la plataforma en cabecera. */
.brand-block img { flex: 0 0 auto; height: 42px; width: 42px; } /* Define tamano estable del logo en la cabecera principal. */
.app-header h1 { margin: 0; font-size: 24px; letter-spacing: 0; } /* Ajusta el titulo principal sin margen, con tamano destacado y espaciado normal. */
.app-header p { margin: 4px 0 0; color: rgba(255,255,255,.78); } /* Estiliza el subtitulo de cabecera con texto blanco suavizado. */
.main-nav { align-items: center; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; min-width: 0; } /* Organiza enlaces y acciones del menu en fila sin romper el ancho de pantalla. */
.main-nav a { /* Estiliza cada enlace del menu principal. */
  color: #fff; /* Mantiene el texto del menu en blanco. */
  text-decoration: none; /* Quita el subrayado de los enlaces. */
  border: 1px solid rgba(255,255,255,.28); /* Agrega borde blanco translucido al enlace. */
  border-radius: 6px; /* Redondea suavemente los enlaces del menu. */
  padding: 8px 12px; /* Define espacio interno clicable. */
  font-weight: 650; /* Da peso visual medio-alto al texto del menu. */
} /* Cierra estilos de enlaces del menu. */
.main-nav a.active, .main-nav a:hover { background: var(--accent); border-color: var(--accent); color: #1d1f24; } /* Resalta el enlace activo con ambar calido. */
.nav-button { background: #323642; border-color: rgba(255,255,255,.12); color: #f5f5f5; } /* Convierte acciones principales en botones de navegacion sobre la cabecera carbon. */
.nav-button:hover { background: var(--accent); border-color: var(--accent); color: #1d1f24; } /* Usa ambar calido al pasar por acciones de navegacion. */
.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 { align-items: center; color: rgba(255,255,255,.82); display: inline-flex; gap: 7px; margin-left: 8px; white-space: nowrap; } /* Ubica el filtro de periodo al final del menu superior sin partir el texto. */
.nav-period select { border-color: rgba(255,255,255,.35); min-width: 142px; } /* Ajusta el selector de periodo para convivir con la cabecera. */

.page { padding: 18px 24px 34px; 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. */
.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. */
.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. */

.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(1180px, 100%); } /* Amplia modales administrativos que necesitan tablas de asignacion. */
.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; } /* Estiliza cabecera del modal con carbon, acento ambar y particulas suaves. */
.modal-panel footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); } /* Estiliza pie del modal con acciones alineadas a la derecha. */
.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. */
.admin-management-grid { grid-template-columns: minmax(260px, 420px); } /* Reduce la administracion a un bloque de invitacion antes de la tabla de equipos. */
.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. */
.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. */
.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. */
.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. */
.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-item strong { color: var(--primary); } /* Resalta el titulo de cada notificacion. */
.notification-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } /* Ordena acciones de revision de notificaciones. */
.audit-list { display: grid; gap: 10px; padding: 16px; } /* Organiza los eventos de auditoria dentro de su modal. */
.audit-item { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; display: grid; gap: 8px; padding: 12px; } /* Muestra cada evento como tarjeta blanca con acento ambar. */
.audit-item strong { color: var(--primary); } /* Resalta el nombre humano de la accion auditada. */
.audit-item div { display: grid; gap: 4px; min-width: 0; } /* Apila actor, fecha y recurso sin desbordar el modal. */
.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 ToscaSync 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. */
  .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. */
  .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 { align-items: stretch; flex-direction: column; } /* Apila titulo y navegacion en la cabecera 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. */
} /* Cierra media query de moviles. */