/* ═══════════════════════════════════════════════════════════════════════════
   PANEL DE ADMINISTRADOR — ESTILO NEUMÓRFICO (Soft UI)
   Inversiones Tecnológicas — Tienda de tecnología
   Todos los elementos usan el mismo tono del fondo; la profundidad se logra
   con doble sombra (clara + oscura). Elementos elevados = sombra externa,
   elementos hundidos (inputs, nav activo) = sombra interna.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
  --sidebar-w:    230px;

  /* Base neumórfica clara */
  --bg:           #e0e5ec;
  --card-bg:      #e0e5ec;
  --border:       transparent;

  /* Sombras (la clave del estilo) */
  --sh-dark:      rgba(163, 177, 198, 0.60);
  --sh-light:     rgba(255, 255, 255, 0.92);
  --elev:         9px 9px 16px var(--sh-dark), -9px -9px 16px var(--sh-light);
  --elev-sm:      5px 5px 10px var(--sh-dark), -5px -5px 10px var(--sh-light);
  --hundido:      inset 6px 6px 10px var(--sh-dark), inset -6px -6px 10px var(--sh-light);
  --hundido-sm:   inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);
  --shadow:       var(--elev-sm);

  /* Acento tecnológico */
  --accent:       #4d7cfe;
  --accent-dark:  #3b63d6;
  --navy:         #3d4859;      /* títulos (se conserva el nombre de variable) */
  --navy-dark:    #2e3745;
  --navy-light:   #4d7cfe;

  --text:         #3d4859;
  --text-muted:   #5b6478;

  /* Semánticos */
  --green:        #2fa36b;
  --green-bg:     rgba(47, 163, 107, .14);
  --yellow:       #d98e04;
  --yellow-bg:    rgba(217, 142, 4, .14);
  --red:          #e05260;
  --red-bg:       rgba(224, 82, 96, .14);
  --blue:         #4d7cfe;
  --blue-bg:      rgba(77, 124, 254, .14);
  --row-hover:    rgba(163, 177, 198, .14);
  --divider:      rgba(163, 177, 198, .32);

  /* Paleta de gráficas (dataviz, validada con scripts/validate_palette.js) */
  --chart-ordinal-1: #5598e7;  /* estatus: recibido (más claro) */
  --chart-ordinal-2: #2a78d6;  /* estatus: en proceso */
  --chart-ordinal-3: #1c5cab;  /* estatus: listo para retirar */
  --chart-ordinal-4: #104281;  /* estatus: entregado (más oscuro) */
  --chart-cat-1:     #2a78d6;  /* mantenimiento */
  --chart-cat-2:     #eb6834;  /* garantía */
  --chart-cat-3:     #1baf7a;  /* reparación */
  --chart-seq:       #2a78d6;  /* magnitud (tendencia, categorías) */

  --radius:       16px;
  color-scheme:   light;
}

/* Neumorfismo oscuro (el toggle de tema sigue funcionando) */
:root[data-theme="dark"] {
  --bg:           #2b2f3a;
  --card-bg:      #2b2f3a;

  --sh-dark:      rgba(16, 18, 24, 0.65);
  --sh-light:     rgba(66, 72, 88, 0.55);

  --navy:         #e6e9f0;
  --navy-dark:    #cdd3e0;

  --text:         #e6e9f0;
  --text-muted:   #98a0b3;

  --green:        #4ade80;
  --green-bg:     rgba(74, 222, 128, .14);
  --yellow:       #f5b04c;
  --yellow-bg:    rgba(245, 176, 76, .14);
  --red:          #f87c86;
  --red-bg:       rgba(248, 124, 134, .14);
  --blue:         #7c9dff;
  --blue-bg:      rgba(124, 157, 255, .14);
  --row-hover:    rgba(16, 18, 24, .25);
  --divider:      rgba(66, 72, 88, .55);

  --chart-ordinal-1: #cde2fb;
  --chart-ordinal-2: #86b6ef;
  --chart-ordinal-3: #3987e5;
  --chart-ordinal-4: #1c5cab;
  --chart-cat-1:     #3987e5;
  --chart-cat-2:     #d95926;
  --chart-cat-3:     #199e70;
  --chart-seq:       #3987e5;
  color-scheme:   dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Microanimaciones ────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulseSoft {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  background:  var(--bg);
  color:       var(--text);
  display:     flex;
  min-height:  100vh;
  font-size:   14px;
  transition:  background-color .2s ease, color .2s ease;
}

.card, .stat-card, .modal, .topbar {
  transition: background-color .2s ease, box-shadow .2s ease;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width:      var(--sidebar-w);
  background: var(--bg);
  color:      var(--text);
  display:    flex;
  flex-direction: column;
  position:   fixed;
  top: 0; left: 0;
  height:     100vh;
  z-index:    100;
  box-shadow: 9px 0 16px var(--sh-dark);
  padding:    0 14px;
}

.sidebar-logo {
  display:      flex;
  align-items:  center;
  padding:      1.5rem .75rem 1.25rem;
}

.logo-img--full { height: 34px; width: auto; }
.logo-img--icon { display: none; height: 34px; width: auto; }

.sidebar-nav {
  flex: 1;
  padding: .75rem 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     .7rem 1rem;
  color:       var(--text-muted);
  text-decoration: none;
  border-radius: 12px;
  transition:  box-shadow .2s ease, color .2s ease;
  font-size:   .9rem;
  font-weight: 700;
  cursor:      pointer;
}

.nav-item:hover {
  color:      var(--text);
  box-shadow: var(--elev-sm);
}

/* Ítem activo: se ve "hundido" con el icono en color de acento */
.nav-item.activo {
  color:      var(--accent);
  box-shadow: var(--hundido-sm);
}

.nav-icon { display: flex; align-items: center; justify-content: center; width: 20px; }
.nav-icon svg { width: 18px; height: 18px; transition: transform .2s ease; }
.nav-item:hover .nav-icon svg { transform: scale(1.15); }
.nav-item.activo .nav-icon svg { transform: scale(1.1); }

.sidebar-footer { padding: .9rem 0 1.2rem; }

.sidebar-usuario {
  padding:      0 1rem .5rem;
  font-size:    .78rem;
  font-weight:  700;
  color:        var(--text-muted);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

/* ── Main ────────────────────────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex:        1;
  display:     flex;
  flex-direction: column;
  min-height:  100vh;
  min-width:   0;
}

/* ── Banner instrucciones iPhone ─────────────────────────────────────────── */
.banner-ios {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .6rem;
  background:      #0f3460;
  color:           #fff;
  padding:         .65rem 1.1rem;
  font-size:       .82rem;
  text-align:      center;
  line-height:     1.4;
}
.banner-ios.oculto { display: none; }
.banner-ios .icon { width: 15px; height: 15px; flex-shrink: 0; }
.banner-ios button {
  background: transparent;
  border:     none;
  color:      #fff;
  opacity:    .8;
  cursor:     pointer;
  display:    flex;
  flex-shrink: 0;
  padding:    .2rem;
}
.banner-ios button:hover { opacity: 1; }
.banner-ios button svg { width: 18px; height: 18px; }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.1rem 1.75rem;
  background:      var(--bg);
  position:        sticky;
  top:             0;
  z-index:         50;
  box-shadow:      0 6px 12px -6px var(--sh-dark);
}

.topbar-titulo {
  font-size:   1.2rem;
  font-weight: 800;
  color:       var(--navy);
}

.btn-refresh {
  background:  var(--bg);
  border:      none;
  border-radius: 12px;
  padding:     .5rem .95rem;
  font-size:   .85rem;
  font-weight: 700;
  font-family: inherit;
  cursor:      pointer;
  color:       var(--text-muted);
  box-shadow:  var(--elev-sm);
  transition:  box-shadow .2s ease, color .2s ease;
}

.btn-refresh:hover  { color: var(--accent); }
.btn-refresh:active { box-shadow: var(--hundido-sm); }

.topbar-acciones { display: flex; align-items: center; gap: .75rem; }

/* ── Secciones ───────────────────────────────────────────────────────────── */
.seccion {
  display: none;
  padding: 1.75rem;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.seccion.activa { display: flex; animation: fadeInUp .35s ease both; }

/* ── Stats cards ─────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background:    var(--bg);
  border-radius: var(--radius);
  padding:       1.4rem 1.6rem;
  box-shadow:    var(--elev);
  position:      relative;
  overflow:      hidden;
  transition:    transform .2s ease;
  animation:     fadeInUp .4s ease both;
}

.stat-card:nth-child(1) { animation-delay: .02s; }
.stat-card:nth-child(2) { animation-delay: .08s; }
.stat-card:nth-child(3) { animation-delay: .14s; }
.stat-card:nth-child(4) { animation-delay: .20s; }
.stat-card:nth-child(5) { animation-delay: .26s; }
.stat-card:nth-child(6) { animation-delay: .32s; }

.stat-card:hover { transform: translateY(-2px); }

/* Línea de color superior sutil */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 1.4rem; right: 1.4rem;
  height: 4px;
  border-radius: 0 0 4px 4px;
  opacity: .85;
}
.stat-card.azul::before     { background: var(--blue); }
.stat-card.amarillo::before { background: var(--yellow); }
.stat-card.rojo::before     { background: var(--red); }
.stat-card.verde::before    { background: var(--green); }

.stat-valor {
  font-size:   2.1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: .4rem;
}

.stat-card.azul     .stat-valor { color: var(--blue); }
.stat-card.amarillo .stat-valor { color: var(--yellow); }
.stat-card.rojo     .stat-valor { color: var(--red); }
.stat-card.verde    .stat-valor { color: var(--green); }

.stat-label { font-size: .8rem; color: var(--text-muted); font-weight: 700; }

/* ── Gráficas del dashboard ──────────────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.chart-card {
  padding:    1.25rem 1.4rem;
  animation:  fadeInUp .4s ease both;
}
.chart-card:nth-child(1) { animation-delay: .06s; }
.chart-card:nth-child(2) { animation-delay: .12s; }
.chart-card:nth-child(3) { animation-delay: .18s; }
.chart-card:nth-child(4) { animation-delay: .24s; }

.chart-titulo {
  font-size:     .85rem;
  font-weight:   800;
  color:         var(--navy);
  margin-bottom: 1.1rem;
}

/* Barras horizontales (estatus, categorías) */
.hbar-fila {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  margin-bottom: .65rem;
}
.hbar-fila:last-child { margin-bottom: 0; }

.hbar-label {
  width:         112px;
  flex-shrink:   0;
  font-size:     .78rem;
  font-weight:   600;
  color:         var(--text-muted);
  text-align:    right;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.hbar-track {
  flex:          1;
  height:        18px;
  border-radius: 9px;
  box-shadow:    var(--hundido-sm);
  overflow:      hidden;
}

.hbar-fill {
  height:        100%;
  border-radius: 9px;
  transition:    width .6s cubic-bezier(.22,.9,.34,1);
}

.hbar-valor {
  width:                  34px;
  flex-shrink:            0;
  font-size:              .8rem;
  font-weight:            800;
  color:                  var(--text);
  font-variant-numeric:   tabular-nums;
}

/* Barras verticales (tendencia por día) */
.vbar-grafico {
  display:     flex;
  align-items: flex-end;
  gap:         .6rem;
  height:      110px;
}

.vbar-col {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-end;
  height:          100%;
}

.vbar-valor {
  font-size:     .72rem;
  font-weight:   800;
  color:         var(--text-muted);
  margin-bottom: .3rem;
  font-variant-numeric: tabular-nums;
}

.vbar-fill {
  width:         100%;
  max-width:     30px;
  min-height:    4px;
  border-radius: 6px 6px 0 0;
  background:    var(--chart-seq);
  transition:    height .6s cubic-bezier(.22,.9,.34,1);
}

.vbar-dia {
  font-size:      .7rem;
  color:          var(--text-muted);
  margin-top:     .45rem;
  text-transform: capitalize;
}

/* Barra apilada (mantenimiento vs garantía) */
.stackbar {
  display:       flex;
  height:        28px;
  border-radius: 14px;
  overflow:      hidden;
  gap:           2px;
  background:    var(--bg);
  box-shadow:    var(--hundido-sm);
}

.stackbar-seg {
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      .74rem;
  font-weight:    800;
  color:          #fff;
  white-space:    nowrap;
  overflow:       hidden;
  transition:     width .6s cubic-bezier(.22,.9,.34,1);
}

.chart-leyenda {
  display:   flex;
  gap:       1.25rem;
  flex-wrap: wrap;
  margin-top: .9rem;
}

.chart-leyenda-item {
  display:     flex;
  align-items: center;
  gap:         .45rem;
  font-size:   .78rem;
  color:       var(--text-muted);
}

.chart-leyenda-punto {
  width:         10px;
  height:        10px;
  border-radius: 3px;
  flex-shrink:   0;
}

@media (max-width: 900px) {
  .charts-grid { grid-template-columns: 1fr; }
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
  background:    var(--bg);
  border-radius: var(--radius);
  box-shadow:    var(--elev);
  overflow:      hidden;
  min-width:     0; /* evita que la tabla ancha empuje el ancho del flex item (.seccion es flex) */
}

.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.1rem 1.4rem;
  flex-wrap:       wrap;
  gap:             .5rem;
}

.card-header h2 { font-size: 1rem; font-weight: 800; color: var(--navy); }

/* ── Filtros ─────────────────────────────────────────────────────────────── */
.filtros {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex-wrap:   wrap;
}

.btn-filtro {
  border:        none;
  background:    var(--bg);
  border-radius: 20px;
  padding:       .45rem 1rem;
  font-size:     .82rem;
  font-weight:   700;
  font-family:   inherit;
  cursor:        pointer;
  color:         var(--text-muted);
  box-shadow:    var(--elev-sm);
  transition:    box-shadow .2s ease, color .2s ease;
}

.btn-filtro:hover  { color: var(--accent); }

/* Filtro activo: hundido con texto en acento */
.btn-filtro.activo {
  box-shadow: var(--hundido-sm);
  color:      var(--accent);
}

/* Filtro "Atrasados": mismo tono rojo que la tarjeta del dashboard */
.btn-filtro.rojo,
.btn-filtro.rojo:hover,
.btn-filtro.rojo.activo { color: var(--red); }

/* Barra de búsqueda hundida (inset) */
.input-busqueda {
  margin-left:   auto;
  border:        none;
  border-radius: 20px;
  padding:       .5rem 1.1rem;
  font-size:     .82rem;
  font-family:   inherit;
  outline:       none;
  width:         240px;
  background:    var(--bg);
  color:         var(--text);
  box-shadow:    var(--hundido-sm);
  transition:    box-shadow .2s ease;
}

.input-busqueda::placeholder { color: var(--text-muted); }
.input-busqueda:focus { box-shadow: var(--hundido-sm), 0 0 0 2px var(--blue-bg); }

/* ── Tabla ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; padding: 0 .4rem .4rem; }

table {
  width:           100%;
  border-collapse: collapse;
}

thead th {
  background:    transparent;
  padding:       .7rem 1rem;
  text-align:    left;
  font-size:     .74rem;
  font-weight:   800;
  color:         var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space:   nowrap;
}

tbody tr { transition: background .15s; border-radius: 10px; animation: fadeInUp .3s ease both; }
tbody tr:hover { background: var(--row-hover); }

tbody tr:nth-child(1)  { animation-delay: .02s; }
tbody tr:nth-child(2)  { animation-delay: .05s; }
tbody tr:nth-child(3)  { animation-delay: .08s; }
tbody tr:nth-child(4)  { animation-delay: .11s; }
tbody tr:nth-child(5)  { animation-delay: .14s; }
tbody tr:nth-child(6)  { animation-delay: .17s; }
tbody tr:nth-child(7)  { animation-delay: .20s; }
tbody tr:nth-child(8)  { animation-delay: .23s; }
tbody tr:nth-child(9)  { animation-delay: .26s; }
tbody tr:nth-child(10) { animation-delay: .29s; }

tbody td {
  padding:    .75rem 1rem;
  font-size:  .875rem;
  vertical-align: middle;
  border-top: 1px solid var(--divider);
}

tbody tr:first-child td { border-top: none; }

.cargando { color: var(--text-muted); text-align: center; padding: 2rem !important; animation: pulseSoft 1.3s ease-in-out infinite; }
.vacio    { color: var(--text-muted); text-align: center; padding: 2rem !important; font-style: italic; }

/* ── Badges de estatus ───────────────────────────────────────────────────── */
.badge {
  display:       inline-block;
  padding:       .25rem .7rem;
  border-radius: 12px;
  font-size:     .74rem;
  font-weight:   800;
  white-space:   nowrap;
  box-shadow:    var(--hundido-sm);
  animation:     popIn .25s ease both;
}

.badge-confirmada  { background: var(--blue-bg);   color: var(--blue); }
.badge-completada  { background: var(--green-bg);  color: var(--green); }
.badge-cancelada   { background: transparent;      color: var(--text-muted); }
.badge-pendiente   { background: var(--red-bg);    color: var(--red); }
.badge-en_proceso  { background: var(--yellow-bg); color: var(--yellow); }

/* ── Botones de acción ───────────────────────────────────────────────────── */
.acciones {
  display: flex;
  gap:     .45rem;
  flex-wrap: wrap;
}

.btn-accion {
  border:        none;
  border-radius: 10px;
  padding:       .35rem .7rem;
  font-size:     .78rem;
  font-family:   inherit;
  cursor:        pointer;
  font-weight:   700;
  background:    var(--bg);
  box-shadow:    var(--elev-sm);
  transition:    box-shadow .2s ease, transform .2s ease;
}

.btn-accion:hover  { transform: translateY(-1px); }
.btn-accion:active { box-shadow: var(--hundido-sm); transform: none; }

.btn-accion,
.btn-nuevo,
.btn-guardar-form,
.btn-cancelar-form,
.btn-plantilla,
.btn-refresh {
  display:     inline-flex;
  align-items: center;
  gap:         .35rem;
}

.icon { width: 14px; height: 14px; flex-shrink: 0; }

.btn-accion.ver       { color: var(--blue); }
.btn-accion.completar { color: var(--green); }
.btn-accion.cancelar  { color: var(--red); }
.btn-accion.proceso   { color: var(--yellow); }
.btn-accion.pendiente { color: var(--text-muted); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(43, 47, 58, .55);
  backdrop-filter: blur(3px);
  display:    flex;
  align-items: center;
  justify-content: center;
  z-index:    200;
  opacity:    1;
  transition: opacity .2s ease;
}

.modal-overlay.oculto {
  opacity:        0;
  pointer-events:  none;
}

.modal {
  background:    var(--bg);
  border-radius: 20px;
  width:         min(560px, 95vw);
  max-height:    85vh;
  display:       flex;
  flex-direction: column;
  box-shadow:    14px 14px 30px rgba(0,0,0,.30), -6px -6px 20px var(--sh-light);
  transform:     scale(1) translateY(0);
  transition:    transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}

.modal-overlay.oculto .modal {
  transform: scale(.92) translateY(10px);
  opacity:   0;
}

.modal-wide { width: min(720px, 96vw); }

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.1rem 1.4rem;
}

.modal-header h3 { font-size: 1rem; font-weight: 800; color: var(--navy); }

.modal-cerrar {
  background: var(--bg);
  border:     none;
  display:    flex;
  align-items: center;
  justify-content: center;
  cursor:     pointer;
  color:      var(--text-muted);
  line-height: 1;
  width:  34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: var(--elev-sm);
  transition: box-shadow .2s ease, color .2s ease;
}

.modal-cerrar svg { width: 16px; height: 16px; }

.modal-cerrar:hover  { color: var(--red); }
.modal-cerrar:active { box-shadow: var(--hundido-sm); }

.modal-body {
  padding:    .4rem 1.4rem 1.4rem;
  overflow-y: auto;
  flex:       1;
}

.modal-info {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   .45rem .8rem;
  margin-bottom:         1rem;
  font-size:             .875rem;
}

.modal-info dt { color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.modal-info dd { font-weight: 400; }

.historial-item {
  display:       flex;
  align-items:   flex-start;
  gap:           .75rem;
  padding:       .65rem .85rem;
  background:    var(--bg);
  box-shadow:    var(--hundido-sm);
  border-radius: 12px;
  margin-bottom: .6rem;
  font-size:     .82rem;
}

.historial-fecha { color: var(--text-muted); white-space: nowrap; min-width: 120px; }

/* ── Modal mensajería ────────────────────────────────────────────────────── */
.modal-msg-cliente {
  font-size:     .875rem;
  color:         var(--text-muted);
  margin-bottom: .85rem;
}

.plantillas-label {
  font-size:     .74rem;
  font-weight:   800;
  color:         var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}

.plantillas {
  display:       flex;
  gap:           .5rem;
  flex-wrap:     wrap;
  margin-bottom: 1rem;
}

.btn-plantilla {
  border:        none;
  background:    var(--bg);
  border-radius: 20px;
  padding:       .4rem .9rem;
  font-size:     .8rem;
  font-weight:   700;
  font-family:   inherit;
  cursor:        pointer;
  color:         var(--text-muted);
  box-shadow:    var(--elev-sm);
  transition:    box-shadow .2s ease, color .2s ease;
}
.btn-plantilla:hover  { color: var(--accent); }
.btn-plantilla:active { box-shadow: var(--hundido-sm); }

.msg-textarea {
  width:         100%;
  border:        none;
  border-radius: 12px;
  padding:       .7rem .85rem;
  font-size:     .9rem;
  font-family:   inherit;
  resize:        vertical;
  outline:       none;
  background:    var(--bg);
  color:         var(--text);
  box-shadow:    var(--hundido);
  transition:    box-shadow .2s ease;
}
.msg-textarea:focus { box-shadow: var(--hundido), 0 0 0 2px var(--blue-bg); }

/* ── Botón Nuevo (primario, con acento para buen contraste) ─────────────── */
.btn-nuevo {
  margin-left:   auto;
  background:    linear-gradient(145deg, #5a86ff, #4370ef);
  color:         #fff;
  border:        none;
  border-radius: 12px;
  padding:       .5rem 1.15rem;
  font-size:     .85rem;
  font-weight:   800;
  font-family:   inherit;
  cursor:        pointer;
  box-shadow:    5px 5px 12px var(--sh-dark), -4px -4px 10px var(--sh-light);
  transition:    box-shadow .2s ease, transform .2s ease, filter .2s ease;
}
.btn-nuevo:hover  { filter: brightness(1.06); transform: translateY(-1px); }
.btn-nuevo:active {
  transform: none;
  box-shadow: inset 4px 4px 8px rgba(0,0,0,.28), inset -3px -3px 6px rgba(255,255,255,.18);
}

/* ── Formulario ──────────────────────────────────────────────────────────── */
.form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem 1.25rem;
}

.form-grupo { display: flex; flex-direction: column; gap: .4rem; }
.form-grupo--full { grid-column: 1 / -1; }
.form-grupo--relative { position: relative; }

/* ── Buscador de cliente existente (autocompletar) ──────────────────────── */
.autocomplete-list {
  position:      absolute;
  top:           calc(100% + 6px);
  left:          0;
  right:         0;
  background:    var(--bg);
  border-radius: 12px;
  box-shadow:    var(--elev);
  max-height:    220px;
  overflow-y:    auto;
  z-index:       20;
  padding:       .4rem;
  animation:     fadeInUp .18s ease both;
}

.autocomplete-list.oculto { display: none; }

.autocomplete-item {
  padding:       .55rem .75rem;
  border-radius: 8px;
  cursor:        pointer;
  font-size:     .85rem;
  transition:    background .15s ease;
}

.autocomplete-item:hover { background: var(--row-hover); }
.autocomplete-item strong { color: var(--navy); }
.autocomplete-item small { color: var(--text-muted); display: block; font-size: .75rem; margin-top: 2px; }

.autocomplete-hint {
  font-size:   .78rem;
  font-weight: 700;
  color:       var(--green);
}

.autocomplete-hint.oculto { display: none; }

/* ── Foto del equipo (reconocimiento por IA) — zona de arrastre ─────────── */
.dropzone {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            .5rem;
  padding:        1.4rem 1rem;
  border-radius:  12px;
  cursor:         pointer;
  box-shadow:     var(--hundido-sm);
  text-align:     center;
  color:          var(--text-muted);
  transition:     box-shadow .2s ease, color .2s ease, background .2s ease;
}

.dropzone:hover { color: var(--accent); }

.dropzone.dragover {
  color:      var(--accent);
  box-shadow: var(--hundido), 0 0 0 2px var(--blue-bg);
  background: var(--blue-bg);
}

.dropzone-input {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
}

.dropzone-icono { width: 26px; height: 26px; flex-shrink: 0; }

.dropzone-texto {
  font-size:   .78rem;
  font-weight: 600;
  line-height: 1.35;
}

.foto-preview {
  margin-top:    .6rem;
  width:         140px;
  border-radius: 12px;
  overflow:      hidden;
  box-shadow:    var(--elev-sm);
  animation:     popIn .25s ease both;
}

.foto-preview.oculto { display: none; }
.foto-preview img { display: block; width: 100%; }

.form-grupo label {
  font-size:   .8rem;
  font-weight: 800;
  color:       var(--text-muted);
}

.req { color: var(--red); }

/* Inputs hundidos (inset) */
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
  border:        none;
  border-radius: 12px;
  padding:       .6rem .85rem;
  font-size:     .9rem;
  outline:       none;
  transition:    box-shadow .2s ease;
  background:    var(--bg);
  color:         var(--text);
  width:         100%;
  font-family:   inherit;
  box-shadow:    var(--hundido-sm);
}

.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
  box-shadow: var(--hundido-sm), 0 0 0 2px var(--blue-bg);
}

/* Fallback genérico: los usos existentes de ".oculto" son todos reglas de 2
   clases (".modal-overlay.oculto", ".autocomplete-list.oculto", etc.) con
   comportamiento especial (fade, etc.) — por especificidad CSS siguen
   ganando sobre esta regla de 1 clase, así que no rompe nada. Esto es para
   los elementos nuevos (nav-item, form-grupo, botones) que solo necesitan
   ocultarse/mostrarse simple según permisos, sin animación. */
.oculto { display: none; }

.permisos-lista {
  display:        flex;
  flex-direction: column;
  gap:            .55rem;
  padding:        .75rem .9rem;
  border-radius:  12px;
  background:     var(--bg);
  box-shadow:     var(--hundido-sm);
}

.permiso-item {
  display:     flex;
  align-items: center;
  gap:         .55rem;
  font-size:   .85rem;
  font-weight: 700;
  color:       var(--text);
  cursor:      pointer;
}

.permiso-item input[type="checkbox"] {
  width:  16px;
  height: 16px;
  accent-color: var(--blue, #4370ef);
  cursor: pointer;
}

.tabla-horario { width: 100%; border-collapse: collapse; }
.tabla-horario th, .tabla-horario td {
  padding:    .35rem .5rem;
  text-align: left;
  font-size:  .82rem;
}
.tabla-horario input[type="checkbox"] {
  width:  16px;
  height: 16px;
  accent-color: var(--blue, #4370ef);
  cursor: pointer;
}
.tabla-horario input[type="time"] {
  width:      auto;
  font-size:  .82rem;
  padding:    .25rem .4rem;
}
.tabla-horario input[type="time"]:disabled { opacity: .4; }

.form-grupo input:disabled {
  color:       var(--text-muted);
  cursor:      not-allowed;
  box-shadow:  var(--hundido-sm);
  opacity:     .7;
}

.form-error {
  color:      var(--red);
  font-size:  .82rem;
  min-height: 1rem;
  margin-top: .5rem;
}

.form-acciones {
  display:         flex;
  justify-content: flex-end;
  gap:             .75rem;
  margin-top:      1.4rem;
  padding-top:     1.1rem;
}

.btn-cancelar-form {
  background:    var(--bg);
  border:        none;
  border-radius: 12px;
  padding:       .5rem 1.15rem;
  font-size:     .875rem;
  font-weight:   700;
  font-family:   inherit;
  cursor:        pointer;
  color:         var(--text-muted);
  box-shadow:    var(--elev-sm);
  transition:    box-shadow .2s ease, color .2s ease;
}
.btn-cancelar-form:hover  { color: var(--text); }
.btn-cancelar-form:active { box-shadow: var(--hundido-sm); }

/* Botón crítico Guardar: acento con texto blanco (contraste/accesibilidad) */
.btn-guardar-form {
  background:    linear-gradient(145deg, #5a86ff, #4370ef);
  color:         #fff;
  border:        none;
  border-radius: 12px;
  padding:       .5rem 1.5rem;
  font-size:     .875rem;
  font-weight:   800;
  font-family:   inherit;
  cursor:        pointer;
  box-shadow:    5px 5px 12px var(--sh-dark), -4px -4px 10px var(--sh-light);
  transition:    box-shadow .2s ease, transform .2s ease, filter .2s ease;
}
.btn-guardar-form:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-guardar-form:active {
  transform: none;
  box-shadow: inset 4px 4px 8px rgba(0,0,0,.28), inset -3px -3px 6px rgba(255,255,255,.18);
}
.btn-guardar-form:disabled {
  background: var(--bg);
  color:      var(--text-muted);
  cursor:     not-allowed;
  box-shadow: var(--hundido-sm);
  filter:     none;
  transform:  none;
}

/* ── Scrollbar suave a juego ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--sh-dark);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .sidebar    { width: 68px; padding: 0 8px; }
  .sidebar-logo { justify-content: center; padding: 1.25rem 0; }
  .logo-img--full { display: none; }
  .logo-img--icon { display: block; }
  .nav-item   { justify-content: center; padding: .7rem 0; font-size: 0; }
  .main       { margin-left: 68px; }
  .seccion    { padding: 1.1rem .85rem; gap: 1.1rem; }

  .topbar        { padding: .9rem 1rem; }
  .topbar-titulo { font-size: 1.05rem; }
  .topbar-acciones { gap: .4rem; }
  .btn-refresh   { padding: .5rem; font-size: 0; }

  .form-grid { grid-template-columns: 1fr; }

  .input-busqueda { width: 100%; flex: 1 1 100%; }
  .filtros { gap: .5rem; }
  .filtros .btn-nuevo,
  .filtros .btn-cancelar-form { margin-left: 0; }

  .modal-header { padding: .9rem 1rem; }
  .modal-body   { padding: .3rem 1rem 1.1rem; }
  .modal-info   { grid-template-columns: 1fr; gap: .15rem .8rem; }
  .modal-info dt { margin-top: .4rem; }

  table  { font-size: .82rem; }
  th, td { padding-left: .6rem !important; padding-right: .6rem !important; }

  .stat-valor { font-size: 1.7rem; }
  .stat-card  { padding: 1.1rem 1.25rem; }
}