/* Estilos del panel de gestores (sobre Pico CSS). */
:root {
  --azul: #1f3a93;
  --azul-osc: #142764;
  --fondo: #f3f5fa;
  --borde: #e2e6ef;
  --texto-suave: #5b6478;
  --rojo: #c62828; --naranja: #ef6c00; --amarillo: #f9a825; --verde: #2e7d32;
  --pico-primary: var(--azul);
  --pico-primary-background: var(--azul);
  --pico-primary-border: var(--azul);
  --pico-primary-hover: var(--azul-osc);
  --pico-primary-hover-background: var(--azul-osc);
  --pico-border-radius: 8px;
}
body.panel { background: var(--fondo); }

/* --- Cabecera --- */
.barra-panel { background: var(--azul); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.barra-panel nav { padding: 0; }
.barra-panel a, .barra-panel summary { color: #fff; }
.barra-panel .marca { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: #fff; text-decoration: none; }
.barra-panel .marca img { width: 30px; height: 30px; border-radius: 6px; }
.barra-panel .marca small { display: block; font-weight: 400; font-size: .72rem; opacity: .8; line-height: 1.1; }
.barra-panel .menu-ancho a { padding: .4rem .65rem; border-radius: 6px; font-size: .92rem; text-decoration: none; }
.barra-panel .menu-ancho a:hover { background: rgba(255,255,255,.12); }
.barra-panel .menu-ancho a[aria-current] { background: rgba(255,255,255,.2); font-weight: 600; }
.barra-panel .usuario { opacity: .9; font-size: .88rem; }
.barra-panel details.dropdown summary { border-color: rgba(255,255,255,.4); }
/* Pico da margen negativo al último menú de la barra: en el móvil sobresalía 8 px. */
.barra-panel nav > ul:last-child { margin-right: 0; }
.barra-panel details.dropdown ul a { color: var(--pico-color); }

/* --- Cabecera de página --- */
.cab-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem; margin: 1.4rem 0 1rem; }
.cab-pagina h1 { font-size: 1.6rem; margin: 0; }
.cab-pagina .sub { color: var(--texto-suave); margin: .2rem 0 0; font-size: .92rem; }
.cab-pagina .acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.cab-pagina .acciones a, .cab-pagina .acciones button { margin: 0; }

/* --- Tarjetas --- */
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; box-shadow: 0 1px 3px rgba(20,39,100,.05); }
.tarjeta > h2, .tarjeta > h3 { font-size: 1.05rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .45rem; }
.tarjeta > h2 small, .tarjeta > h3 small { font-weight: 400; color: var(--texto-suave); }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.rejilla-2 > .tarjeta { margin-bottom: 0; }

/* --- Cifras --- */
.cifras { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin-bottom: 1.1rem; }
.cifra { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: .8rem 1rem; }
.cifra .et { font-size: .78rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.cifra .val { font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
.cifra .det { font-size: .8rem; color: var(--texto-suave); }
.cifra.alerta .val { color: var(--rojo); }

/* --- Etiquetas --- */
.chip { display: inline-block; font-size: .72rem; line-height: 1.2; padding: .15rem .5rem; border-radius: 999px; background: #eef1f8; color: #34405a; white-space: nowrap; vertical-align: middle; }
.chip-fijo { background: #e3ecff; color: var(--azul); font-weight: 600; }
.chip-cal { background: #fff4e0; color: #8a5300; }
.chip-inactiva { background: #f3f3f3; color: #888; }
.estado { display: inline-block; padding: .2rem .65rem; border-radius: 999px; color: #fff; font-weight: 700; font-size: .8rem; }
.estado-libre-p { background: #1a7f37; } .estado-ocupado-p { background: #b3261e; }

/* --- Lista de micro-objetivos --- */
.mo-fila[hidden], .grupo[hidden], .franja[hidden], button[hidden] { display: none !important; }
.herramientas { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.herramientas input[type=search] { flex: 1 1 260px; margin: 0; }
.herramientas label { margin: 0; font-size: .9rem; }
.grupo { margin-bottom: 1rem; }
.grupo > summary { font-weight: 700; font-size: .82rem; letter-spacing: .03em; color: var(--azul); padding: .4rem 0; list-style: none; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary::before { content: "▾ "; }
.grupo:not([open]) > summary::before { content: "▸ "; }
.mo-fila { display: grid; grid-template-columns: 10px 1fr 190px; gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: .65rem .9rem; margin-bottom: .45rem; text-decoration: none; color: inherit; }
.mo-fila:hover { border-color: var(--azul); box-shadow: 0 2px 8px rgba(31,58,147,.08); }
.mo-fila .punto { width: 10px; height: 10px; border-radius: 50%; }
.punto-rojo { background: var(--rojo); } .punto-naranja { background: var(--naranja); }
.punto-amarillo { background: var(--amarillo); } .punto-verde { background: var(--verde); }
.mo-fila .tit { font-weight: 600; line-height: 1.3; }
.mo-fila .meta { font-size: .8rem; color: var(--texto-suave); margin-top: .15rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.progreso { font-size: .78rem; color: var(--texto-suave); }
.progreso .barra { height: 8px; background: #edf0f6; border-radius: 99px; overflow: hidden; margin: .25rem 0; }
.progreso .barra span { display: block; height: 100%; background: var(--azul); border-radius: 99px; }

/* --- Formularios --- */
.formulario .tarjeta label { font-weight: 500; }
.ayuda { font-size: .82rem; color: var(--texto-suave); margin-top: -.4rem; margin-bottom: .8rem; }
.franja { display: grid; grid-template-columns: 1fr 130px 130px 40px; gap: .6rem; align-items: center; padding: .55rem .6rem; border: 1px solid var(--borde); border-radius: 10px; margin-bottom: .5rem; background: #fafbfe; }
.franja input[type=time] { margin: 0; }
.franja select.cuando { grid-column: 1 / -1; margin: 0; padding-top: .3rem; padding-bottom: .3rem; font-size: .85rem; }
.franja .quitar { margin: 0; padding: .35rem; background: transparent; border: none; color: var(--texto-suave); font-size: 1.1rem; }
.dias-botones { display: flex; gap: .3rem; flex-wrap: wrap; }
.dias-botones input { position: absolute; opacity: 0; pointer-events: none; }
.dias-botones label { margin: 0; width: 2.1rem; height: 2.1rem; line-height: 2.1rem; text-align: center; border-radius: 8px; border: 1px solid var(--borde); background: #fff; font-weight: 600; font-size: .85rem; cursor: pointer; user-select: none; }
.dias-botones input:checked + label { background: var(--azul); border-color: var(--azul); color: #fff; }
.atajos { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; }
.atajos button { margin: 0; padding: .3rem .65rem; font-size: .8rem; }
.botonera { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.botonera > * { margin: 0; }
.interruptor { display: flex; align-items: flex-start; gap: .5rem; }
.interruptor input { margin-top: .2rem; }
.interruptor small { display: block; color: var(--texto-suave); font-weight: 400; }

/* --- Tablas --- */
.tabla { width: 100%; font-size: .88rem; }
.tabla th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); background: #f7f8fc; }
.tabla td, .tabla th { padding: .5rem .6rem; }

/* --- Login --- */
.login { max-width: 400px; margin: 7vh auto; }
.login .escudo { display: block; width: 64px; height: 64px; margin: 0 auto .8rem; border-radius: 12px; }
.login h1 { text-align: center; font-size: 1.4rem; margin-bottom: .2rem; }
.login p.sub { text-align: center; color: var(--texto-suave); margin-bottom: 1.3rem; }

@media (max-width: 900px) {
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .rejilla-2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .cab-pagina { margin-top: 1rem; }
  .cab-pagina h1 { font-size: 1.3rem; }
  .mo-fila { grid-template-columns: 10px 1fr; }
  .mo-fila .progreso { grid-column: 2; }
  .franja { grid-template-columns: 1fr 1fr 40px; }
  .franja .dias-botones { grid-column: 1 / -1; }
  .tarjeta { padding: .9rem; }
}

.cifras-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .cifras-3 { grid-template-columns: 1fr; } }

/* Pico define sus colores en :root con más especificidad: se aplican sobre el body del panel. */
body.panel {
  --pico-primary: var(--azul);
  --pico-primary-background: var(--azul);
  --pico-primary-border: var(--azul);
  --pico-primary-hover: var(--azul-osc);
  --pico-primary-hover-background: var(--azul-osc);
  --pico-primary-hover-border: var(--azul-osc);
  --pico-primary-focus: rgba(31, 58, 147, .25);
  --pico-primary-underline: rgba(31, 58, 147, .5);
}
.botonera button, .botonera a[role=button] { width: auto; min-width: 9rem; }

/* Menú en una sola línea; si la pantalla no da para todas las pestañas, el menú ☰. */
.barra-panel .menu-ancho a { white-space: nowrap; font-size: .82rem; padding: .35rem .45rem; }
.barra-panel .menu-ancho li { padding-left: .1rem; padding-right: .1rem; }
.barra-panel .marca span { white-space: nowrap; }
@media (max-width: 1239px) {
  .barra-panel .menu-ancho { display: none; }
  .barra-panel .menu-movil { display: block; }
}
.barra-panel nav.container { max-width: none; padding-left: 1.25rem; padding-right: 1.25rem; }
.barra-panel .menu-ancho { gap: .7rem; }