/* =============================================================================
   Fonakids — Design System (Fase 1). SaaS clínico administrativo: sobrio, operativo,
   legible. CSS estático único: tokens (variables) + clases de componente `fk-`.
   Se carga DESPUÉS del Tailwind CDN; las utilidades Tailwind del sistema quedan intactas.
   Las clases `fk-` son inertes hasta que un template las usa → otras pantallas no cambian.
   ============================================================================= */

:root {
  /* Marca / acción */
  --fk-primary: #2B5FAC;
  --fk-primary-hover: #234E8C;
  --fk-primary-weak: #EAF1FB;
  /* Neutros (columna vertebral del SaaS sobrio) */
  --fk-bg: #F6F8FA;
  --fk-surface: #FFFFFF;
  --fk-surface-2: #F3F5F8;     /* headers de tabla, hover de botón gris */
  --fk-border: #E3E8EF;        /* divisores suaves (cards) */
  --fk-border-strong: #AAB4C2; /* cajas de texto, botones y switchers: borde claramente definido */
  --fk-grid-line: #CDD5DF;     /* líneas de la grilla (columnas/filas) — visibles */
  --fk-text: #1A2430;
  --fk-text-muted: #5B6776;
  --fk-text-subtle: #8A95A3;
  /* Semánticos (respetan los significados de estado/semáforo) */
  --fk-success: #1F8A4C; --fk-success-weak: #E7F4EC;
  --fk-warning: #B9770A; --fk-warning-weak: #FBF1DD; --fk-warning-ink: #8A5908;
  --fk-danger:  #C2362C; --fk-danger-weak:  #FBEAE8;
  --fk-purple:  #6D4AA3; --fk-purple-weak:  #F1EBF9;
  --fk-neutral: #5B6776; --fk-neutral-weak: #EEF1F4;
  /* Forma */
  --fk-radius: 10px;
  --fk-radius-sm: 7px;
  --fk-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --fk-ring: 0 0 0 3px rgba(43,95,172,.28);
  --fk-font: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* Ámbito de la pantalla rediseñada: tipografía + color de texto. NO toca otras vistas
   (solo aplica a quien lleve .fk-page). */
.fk-page { font-family: var(--fk-font); color: var(--fk-text); }
.fk-page :is(h1, h2, h3, p, span, td, th, label, a, button, input, select) { font-family: inherit; }

/* --- Header de pantalla --------------------------------------------------- */
.fk-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.fk-page-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.012em; color: var(--fk-text); margin: 0; }
.fk-page-subtitle { font-size: .8125rem; color: var(--fk-text-muted); margin: .15rem 0 0; }

/* --- Botones -------------------------------------------------------------- */
.fk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: var(--fk-radius-sm);
  font-size: .8125rem; font-weight: 500; line-height: 1.1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.fk-btn:focus-visible { outline: none; box-shadow: var(--fk-ring); }
/* Botón primario = acción principal: sólido + leve sombra para que LIDERE sobre switchers. */
.fk-btn--primary { background: var(--fk-primary); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(43,95,172,.28); }
.fk-btn--primary:hover { background: var(--fk-primary-hover); }
.fk-btn--secondary { background: var(--fk-surface); color: var(--fk-text); border-color: var(--fk-border-strong); }
.fk-btn--secondary:hover { background: var(--fk-surface-2); }
.fk-btn--outline { background: transparent; color: var(--fk-text-muted); border-color: var(--fk-border-strong); }
.fk-btn--outline:hover { background: var(--fk-surface-2); color: var(--fk-text); }
.fk-btn--danger { background: var(--fk-surface); color: var(--fk-danger); border-color: #E6C2BE; }
.fk-btn--danger:hover { background: var(--fk-danger-weak); }
.fk-btn--purple { background: var(--fk-purple); color: #fff; }
.fk-btn--purple:hover { background: #5C3E8C; }
.fk-btn--warning { background: var(--fk-warning); color: #fff; }
.fk-btn--warning:hover { background: var(--fk-warning-ink); }
.fk-btn--sm { padding: .3rem .55rem; font-size: .75rem; gap: .3rem; border-radius: 6px; }
.fk-btn--on { border-color: var(--fk-primary); color: var(--fk-primary); box-shadow: inset 0 0 0 1px var(--fk-primary); }
.fk-btn[aria-disabled="true"], .fk-btn:disabled { opacity: .45; pointer-events: none; }

/* --- Inputs / selects / labels -------------------------------------------- */
.fk-label { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--fk-text-muted); margin-bottom: .3rem; }
.fk-input, .fk-select {
  width: 100%; padding: .45rem .6rem; font-size: .8125rem; line-height: 1.3;
  color: var(--fk-text); background: var(--fk-surface);
  border: 1.5px solid var(--fk-border-strong); border-radius: var(--fk-radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.fk-input::placeholder { color: var(--fk-text-subtle); }
.fk-input:hover, .fk-select:hover { border-color: #94A0AF; }
.fk-input:focus, .fk-select:focus { outline: none; border-color: var(--fk-primary); box-shadow: var(--fk-ring); }
.fk-select { appearance: none; -webkit-appearance: none; padding-right: 1.8rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%235B6776' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right .55rem center; }

/* --- Card ----------------------------------------------------------------- */
.fk-card { background: var(--fk-surface); border: 1px solid var(--fk-border); border-radius: var(--fk-radius); box-shadow: var(--fk-shadow-sm); }
.fk-card--pad { padding: 1rem; }
.fk-card--flush { overflow: hidden; }
.fk-card--raised { box-shadow: 0 12px 28px -6px rgba(16,24,40,.22), 0 4px 10px -4px rgba(16,24,40,.12); }

/* --- Botón de ESTADO (codificado por color; conserva el significado de cada estado) --- */
.fk-estbtn { display: flex; width: 100%; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .75rem; border-radius: var(--fk-radius-sm); font-size: .8125rem; font-weight: 500; line-height: 1.1; background: var(--fk-surface); border: 1px solid var(--fk-border); cursor: pointer; transition: background-color .1s ease, box-shadow .1s ease; }
.fk-estbtn:focus-visible { outline: none; box-shadow: var(--fk-ring); }
.fk-estbtn--split { justify-content: space-between; }
.fk-estbtn--success { border-color: #A7D3B6; color: var(--fk-success); }
.fk-estbtn--success:hover { background: var(--fk-success-weak); }
.fk-estbtn--warning { border-color: #E6CD93; color: var(--fk-warning-ink); }
.fk-estbtn--warning:hover { background: var(--fk-warning-weak); }
.fk-estbtn--danger  { border-color: #E6BCB7; color: var(--fk-danger); }
.fk-estbtn--danger:hover  { background: var(--fk-danger-weak); }
.fk-estbtn--neutral { border-color: var(--fk-border); color: var(--fk-text-muted); }
.fk-estbtn--neutral:hover { background: var(--fk-surface-2); }
.fk-estbtn--info { border-color: #B6CCE8; color: var(--fk-primary); }
.fk-estbtn--info:hover { background: var(--fk-primary-weak); }
.fk-estbtn--on { box-shadow: inset 0 0 0 2px currentColor; }

/* --- Fieldset (agrupar campos dentro de un form) -------------------------- */
.fk-fieldset { border: 1px solid var(--fk-border); border-radius: var(--fk-radius); padding: 1rem 1.1rem 1.1rem; }
.fk-fieldset__legend { font-size: .6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--fk-text-muted); padding: 0 .4rem; }

/* --- Logo del navbar -----------------------------------------------------
   El PNG es un wordmark en canvas cuadrado 1024² con ~81% de padding vertical (banda real:
   x 39–992, y 413–610). Lo muestro como <img> y recorto la banda con un contenedor
   overflow:hidden + img escalada y posicionada con números medidos del archivo (determinístico,
   NO depende de cover/centrado, NO deforma ni modifica el PNG). */
.fk-navlogo { display: inline-block; width: 130px; height: 30px; overflow: hidden; line-height: 0; }
.fk-navlogo img { display: block; width: 135px; height: 135px; max-width: none; margin: -53px 0 0 -3px; }

/* --- Link de texto (volver / inline) ------------------------------------- */
.fk-link { color: var(--fk-primary); font-size: .8125rem; font-weight: 500; text-decoration: none; }
.fk-link:hover { text-decoration: underline; }
.fk-link:focus-visible { outline: none; box-shadow: var(--fk-ring); border-radius: 4px; }

/* --- Segmented (switchers de vista / agrupación) -------------------------- */
.fk-segmented { display: inline-flex; border: 1.5px solid var(--fk-border-strong); border-radius: var(--fk-radius-sm); overflow: hidden; background: var(--fk-surface); }
.fk-segmented__item { padding: .42rem .85rem; font-size: .8125rem; font-weight: 500; color: var(--fk-text-muted); text-decoration: none; border-left: 1.5px solid var(--fk-border-strong); transition: background-color .1s ease, color .1s ease; }
.fk-segmented__item:first-child { border-left: 0; }
.fk-segmented__item:hover { background: var(--fk-surface-2); color: var(--fk-text); }
/* Activo = vista actual: azul SUAVE (relleno tenue + texto primario), distinto del botón
   primario sólido, para que "+ Nuevo turno"/"Filtrar" lideren la jerarquía. */
.fk-segmented__item--active, .fk-segmented__item--active:hover { background: var(--fk-primary-weak); color: var(--fk-primary); font-weight: 600; }
.fk-segmented__item:focus-visible { outline: none; box-shadow: inset var(--fk-ring); }

/* --- Badges / semáforo (estados de turno + Óptimo/Atención/Subutilizado) --- */
.fk-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.fk-badge--info    { background: var(--fk-primary-weak); color: var(--fk-primary); }
.fk-badge--success { background: var(--fk-success-weak); color: var(--fk-success); }
.fk-badge--warning { background: var(--fk-warning-weak); color: var(--fk-warning-ink); }
.fk-badge--danger  { background: var(--fk-danger-weak);  color: var(--fk-danger); }
.fk-badge--purple  { background: var(--fk-purple-weak);  color: var(--fk-purple); }
.fk-badge--neutral { background: var(--fk-neutral-weak); color: var(--fk-neutral); }

/* --- Tabla / grilla ------------------------------------------------------- */
.fk-table { width: 100%; border-collapse: collapse; font-size: .8125rem; color: var(--fk-text); }
.fk-table thead th { background: var(--fk-surface-2); color: var(--fk-text-muted); font-weight: 600; font-size: .6875rem; letter-spacing: .03em; text-transform: uppercase; text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--fk-border); }
.fk-table tbody td { padding: .5rem .65rem; border-top: 1px solid var(--fk-border); vertical-align: top; }
.fk-table tbody tr:hover { background: #F8FAFC; }
.fk-table--grid { font-variant-numeric: tabular-nums; }
/* Header de grilla: más peso (fondo gris + texto oscuro) para que ancle la lectura. */
.fk-table--grid thead th { background: #E7ECF2; color: var(--fk-text); border-left: 1px solid var(--fk-grid-line); border-bottom: 1.5px solid var(--fk-grid-line); }
/* Líneas divisorias VISIBLES entre columnas y filas (la grilla no debe verse plana). */
.fk-table--grid tbody td { border-left: 1px solid var(--fk-grid-line); border-top: 1px solid var(--fk-grid-line); padding: .3rem .35rem; }
.fk-table--grid tbody tr:hover { background: #F4F7FB; }

/* Columna Hora fija (sticky) — definida: texto oscuro + fondo de columna sutil + borde derecho. */
.fk-grid-hora { position: sticky; left: 0; z-index: 10; background: #F1F4F8; color: var(--fk-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; border-right: 1.5px solid var(--fk-grid-line); }
.fk-table--grid thead .fk-grid-hora { z-index: 20; background: #DFE5EC; }

/* --- Celda de turno: FIRMA de la pantalla (acento de estado en borde izq + fill) --- */
.fk-turno {
  display: block; width: 100%; text-align: left;
  margin-bottom: .3rem; padding: .32rem .45rem .32rem .5rem;
  font-size: .75rem; line-height: 1.3; border-radius: 5px;
  border: 1px solid transparent; border-left: 3px solid var(--fk-neutral);
  background: var(--fk-surface); color: var(--fk-text);
  transition: box-shadow .1s ease, border-color .1s ease;
}
.fk-turno:last-child { margin-bottom: 0; }
button.fk-turno { cursor: pointer; }
button.fk-turno:hover { box-shadow: var(--fk-ring); }
button.fk-turno:focus-visible { outline: none; box-shadow: var(--fk-ring); }
.fk-turno--info    { border-left-color: var(--fk-primary); background: var(--fk-primary-weak); }
.fk-turno--success { border-left-color: var(--fk-success); background: var(--fk-success-weak); }
.fk-turno--warning { border-left-color: var(--fk-warning); background: var(--fk-warning-weak); }
.fk-turno--danger  { border-left-color: var(--fk-danger);  background: var(--fk-danger-weak); }
.fk-turno--purple  { border-left-color: var(--fk-purple);  background: var(--fk-purple-weak); }
.fk-turno--neutral { border-left-color: var(--fk-neutral); background: var(--fk-neutral-weak); }
.fk-turno--off { opacity: .6; text-decoration: line-through; }

/* Celda libre: "+" para agendar (sutil) y "·" inerte */
.fk-cell-add { display: block; text-align: center; font-size: .75rem; padding: .25rem; color: #C4CCD6; text-decoration: none; border-radius: 4px; transition: background-color .1s ease, color .1s ease; }
.fk-cell-add:hover { color: var(--fk-primary); background: var(--fk-primary-weak); }
.fk-cell-add:focus-visible { outline: none; box-shadow: inset var(--fk-ring); }
.fk-cell-empty { text-align: center; color: #D5DAE1; font-size: .75rem; padding: .25rem; }

/* --- Foco de teclado visible (transversal dentro de la pantalla) ----------- */
.fk-page a:focus-visible { outline: none; box-shadow: var(--fk-ring); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .fk-btn, .fk-turno, .fk-segmented__item, .fk-input, .fk-select, .fk-cell-add { transition: none; }
}