/* ===== TEMA (colores base) ===== */
:root{
  --fondo: #f6f7fb;
  --tarjeta: #ffffff;
  --texto: #0f172a;
  --suave: #475569;
  --borde: #e2e8f0;

  --primario: #2563eb;      /* azul */
  --primario-hover: #1d4ed8;

  --secundario: #0f172a;    /* casi negro */
  --secundario-hover: #111827;

  --exito: #16a34a;
  --error: #dc2626;
  --alerta: #f59e0b;
  --agmer-rojo: #d50000;     /* mismo rojo que el INICIO */
  --header-alto: 90px;       /* mismo alto que el INICIO */

  --sombra: 0 10px 25px rgba(15,23,42,0.08);

  --fondo-imagen: url("/estaticos/img/frente_casa_colon.jpg"); /* Cambiá acá si querés otra */
}

/* app/estaticos/css/estilos.css
   Estilos mínimos para validar que el render funciona.
   El diseño final lo hacemos después con Tailwind o CSS más completo.
*/

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  position: relative;
}



.contenedor {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px;
}

.titulo {
  margin: 0 0 12px 0;
}

.acciones {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* CLAVE: evita que se “agrande” y se salga del contenedor */
  box-sizing: border-box;

  /* Tamaño base uniforme */
  min-height: 44px;
  padding: 10px 16px;

  border: 0;
  border-radius: 10px;
  cursor: pointer;

  background: var(--primario);
  color: #ffffff;

  text-decoration: none;

  font-weight: 700;
  font-size: 16px;
  line-height: 1.15;

  /* CLAVE: permite que el texto no se corte */
  white-space: normal;
  text-align: center;
  word-break: break-word;

  /* Para que no “rompa” layouts flex */
  min-width: 0;
  max-width: 100%;
}



.boton:not(.boton-secundario):hover {
  background: var(--primario-hover);
  color: #ffffff;
}



.boton-secundario {
  background: var(--secundario);
  color: #ffffff;                 /* letra blanca */
  border: 1px solid transparent;  /* para que no “salte” al hacer hover */
}


/* Hover del botón negro: gris + letra blanca */
.boton-secundario:hover {
  background: #374151; /* gris */
  color: #ffffff;
  border: 1px solid #374151;
}



.formulario {
  display: grid;
  gap: 10px;
  max-width: 360px;
  margin-top: 16px;
}

input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
}

.alerta {
  padding: 10px 12px;
  border-radius: 10px;
  margin: 12px 0;
  font-weight: 600;
}

.alerta-error {
  background: #fee2e2;
  border: 1px solid var(--error);
  color: var(--error);
}


/* ===========================
   HEADER GLOBAL (toda la app)
   - Mismo rojo y alto que INICIO
   - Contenido de lado a lado
   =========================== */
.header{
  background: var(--inicio-rojo);
  height: var(--inicio-top);
  border-bottom: none;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  overflow: visible; /* evita recortes de botones */
}

.header-contenido{
  max-width: none;      /* lado a lado */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 28px;      /* aire a los costados */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

/* Logo en barra */
.header .logo{
  width: 52px;
  height: 52px;
  object-fit: contain;
}

/* Título centrado (NO link) */
.header-titulo{
  font-size: 24px;
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
}

/* Derecha: bienvenida + campana + (Panel/Salir + hora abajo) */
.header-derecha{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap: nowrap;
}

/* Contenedor de acciones (Panel/Salir arriba y hora abajo) */
.header-acciones{
  display:grid;
  grid-template-rows: auto auto;
  gap: 6px;
  justify-items: stretch;
}

/* Los dos botones arriba, en 2 columnas */
.header-botones{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

/* Botones del header (evita recortes) */
.header-boton{
  min-height: 44px;
  height: 44px;
  padding: 10px 16px;
  line-height: 1.1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Fecha/hora SIN fondo, debajo, mismo ancho que los 2 botones */
.header-fecha{
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}

/* Bienvenida sin negrita */
.header-bienvenida{
  white-space: nowrap;
  color: #ffffff;
}



/* ===== Header: Panel y Salir mismo tamaño SIEMPRE ===== */
.header-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.link {
  text-decoration: none;
  font-weight: 800;
  color: var(--texto);
}

.link:hover {
  color: var(--primario);
}

.texto-suave {
  color: #374151;
  margin-top: 6px;
}

.grilla-botones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.tarjeta-boton{
  display: block;
  padding: 18px;
  border-radius: 14px;
  background: var(--secundario);     /* azul oscuro */
  border: 1px solid var(--secundario);
  text-decoration: none;
  color: #ffffff;
  font-weight: 900;
  box-shadow: var(--sombra);
  transition: transform 0.08s ease, border-color 0.08s ease, background 0.08s ease;
}

.tarjeta-boton:hover{
  background: var(--secundario-hover);
  border-color: var(--secundario-hover);
  transform: translateY(-1px);
}



.marca-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.marca-titulo {
  font-weight: 900;
  color: var(--texto);
  letter-spacing: 0.2px;
}


.boton-terciario {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: white;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  color: var(--texto);
}

.boton-terciario:hover {
  border-color: var(--primario);
  color: var(--primario);
}


/* ===== Marca de agua para TODO el sitio ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--fondo-imagen);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.25;            /* más bajo = más suave */
  filter: grayscale(55%);   /* la hace más “marca de agua” */
  pointer-events: none;
  z-index: 0;
}

/* Asegura que el contenido esté por arriba del fondo */
.header,
.contenedor {
  position: relative;
  z-index: 1;
}

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--sombra);
}

.texto-suave {
  color: var(--suave);
  font-weight: 700;
}

/* Botón superior oscuro (Panel / Salir) */
.boton_oscuro {
  background: #111827;
  color: #ffffff;
  border: 1px solid transparent;
}

/* Al pasar el mouse: fondo blanco */
.boton_oscuro:hover {
  background: #ffffff;
  color: #111827;
  border: 1px solid #111827;
}

/* Barra superior: Panel (<a>) y Salir (<button>) iguales, sin subrayado */
.header-derecha a.boton.boton-secundario,
.header-derecha button.boton.boton-secundario {
  text-decoration: none;   /* saca el subrayado del <a> */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Estas 3 líneas fuerzan el mismo tamaño */
  padding: 10px 16px;
  line-height: 1;
  height: 40px;
}

/* Hover blanco para ambos */
.header-derecha a.boton.boton-secundario:hover,
.header-derecha button.boton.boton-secundario:hover {
  background: #374151;
  color: #ffffff;
}

/* Botones del encabezado (solo arriba): mismos tamaños y sin subrayado */
.header-boton {
  text-decoration: none !important;  /* nunca subrayado */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  padding: 0 16px !important;
  line-height: 1 !important;

  border-radius: 10px !important;
}

/* Hover blanco para ambos */
.header-boton:hover {
  background: #ffffff !important;
  color: #111827 !important;
}

/* Los <a> con clase boton deben verse igual que un <button> */
a.boton {
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a.boton,
a.boton:visited,
a.boton:hover,
a.boton:active {
  color: inherit;
}


/* Fila de botones: prolija, sin cortar texto */
.fila-botones .boton {
  flex: 1 1 220px;   /* cada botón intenta medir aprox 220px */
  min-width: 220px;  /* si no entra, baja a la línea de abajo */
}


/* Aplica igual a <a> y <button> */
.header-derecha .boton.boton-secundario {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 40px !important;
  padding: 0 16px !important;

  border-radius: 10px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Hover blanco (como ya querías) */
.header-derecha .boton.boton-secundario:hover {
  background: #374151;
  color: #ffffff;
}

/* Evita diferencias del botón nativo */
.header-derecha button.boton.boton-secundario {
  border: 0 !important;
  cursor: pointer !important;
}

/* Consultas operador: tarjetas parejas en grilla 2 columnas */
.grid-tarjetas{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.grid-tarjetas .tarjeta{
  min-height: 320px;      /* cambiá este número si querés más/menos alto */
  display: flex;
  flex-direction: column;
}

.grid-tarjetas .tarjeta .tarjeta-botones{
  margin-top: auto;       /* empuja los botones hacia abajo */
}


/* Fila de botones consistente */
.fila-botones{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ==== Normalizar campos de formularios (alineación) ==== */
.formulario {
  max-width: 520px;
  margin: 0 auto;
}

.formulario .campo {
  margin-top: 12px;
}

.formulario label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Si algún campo trae ícono (calendario) y cambia el alto */
.formulario input[type="date"] {
  min-height: 44px;
}

/* Botón grande alineado */
.formulario .boton {
  width: 100%;
}

/* ===== Formularios (alineación y estilo consistente) ===== */
.campo-label{
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.campo {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  min-height: 44px;
}

/* ===== Calendario / filtros: campos alineados y prolijos ===== */
.filtros-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end; /* clave: alinea los “bordes de abajo” de inputs y botones */
}

.filtro-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px; /* similar a lo que venías usando */
}

/* Los date a veces se ven “más bajos” según el navegador */
input[type="date"].campo {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ===== ARREGLO: formularios alineados (Operador: reservas/bloqueos) ===== */
/* Fuerza que selects e inputs ocupen el mismo ancho y tengan el mismo alto */
.tarjeta form label {
  display: grid;
  gap: 6px;
  width: 100%;
}

.tarjeta form input:not([type="hidden"]):not([type="submit"]),
.tarjeta form select,
.tarjeta form textarea {
  width: 100%;
  box-sizing: border-box;

  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #ffffff;

  min-height: 44px; /* iguala alto entre select / date / text */
}

/* En algunos navegadores el date se ve distinto si no tiene clase */
.tarjeta form input[type="date"] {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* No tocar botones */
.tarjeta form .boton,
.tarjeta form button.boton {
  width: auto;
}

/* ===== Botón Panel SIEMPRE naranja ===== */
.boton-panel {
  background: var(--alerta) !important;   /* naranja */
  border-color: var(--alerta) !important;
  color: #111827 !important;
}

.boton-panel:hover {
  background: #d97706 !important; /* naranja más oscuro */
  border-color: #d97706 !important;
  color: #111827 !important;
}


.boton-naranja {
  background: #e49b2a;
  color: #0b1220;
}

.boton-azul {
  background: #2f6fe4;
  color: #ffffff;
}

.boton-verde {
  background: #2ea86a;
  color: #ffffff;
}

.boton-violeta {
  background: #6f63d9;
  color: #ffffff;
}

.boton-gris {
  background: #1f2a3a;
  color: #ffffff;
}

.boton-rojo {
  background: #d32f2f;
  color: #ffffff;
}

.boton-rojo:hover {
  filter: brightness(0.95);
}

/* Hover suave */
.boton-naranja:hover,
.boton-azul:hover,
.boton-verde:hover,
.boton-violeta:hover,
.boton-gris:hover {
  filter: brightness(0.95);
}

/* ===========================
   Alineación de filas de botones
   =========================== */
.fila-botones,
.barra-acciones {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.barra-acciones > .boton {
  height: 44px;
}

/* Buscador de fechas: alinear inputs y botón, y poner la ayuda abajo sin desalinear */
.buscador-fechas{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}

.buscador-fechas .campo{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.buscador-fechas .acciones{
  align-self: end;
}

.buscador-fechas .btn-buscar{
  height: 44px;            /* ajusta si tus inputs son más altos */
  padding: 0 18px;
  border-radius: 12px;
}

.buscador-fechas .ayuda-fechas{
  grid-column: 1 / span 2; /* ocupa el ancho de Desde + Hasta */
  font-size: 13px;
  line-height: 1.2;
  margin-top: -6px;        /* lo sube un poquito para que quede prolijo */
}

/* ============================
   BOTONES - COLORES EXTRA
   Uso: class="boton boton-rojo" (por ejemplo)
   ============================ */

/* ROJO: peligro / cancelar / eliminar */
.boton-rojo{
  background:#d32f2f;
  border-color:#d32f2f;
  color:#fff;
}
.boton-rojo:hover{ filter:brightness(0.95); }

/* CELESTE: info / ver detalles / acciones neutras */
.boton-celeste{
  background:#0288d1;
  border-color:#0288d1;
  color:#fff;
}
.boton-celeste:hover{ filter:brightness(0.95); }

/* AMARILLO: advertencia / atención */
.boton-amarillo{
  background:#f9a825;
  border-color:#f9a825;
  color:#111;
}
.boton-amarillo:hover{ filter:brightness(0.95); }

/* TURQUESA: alternativa / acción secundaria llamativa */
.boton-turquesa{
  background:#00897b;
  border-color:#00897b;
  color:#fff;
}
.boton-turquesa:hover{ filter:brightness(0.95); }

/* NEGRO: acción fuerte / especial */
.boton-negro{
  background:#111827;
  border-color:#111827;
  color:#fff;
}
.boton-negro:hover{ filter:brightness(1.05); }

/* BORDÓ: crítico (menos “alarma” que rojo) */
.boton-bordo{
  background:#7f1d1d;
  border-color:#7f1d1d;
  color:#fff;
}
.boton-bordo:hover{ filter:brightness(1.05); }

/* LILA: variante suave del violeta */
.boton-lila{
  background:#7c3aed;
  border-color:#7c3aed;
  color:#fff;
}
.boton-lila:hover{ filter:brightness(0.95); }

/* ROSA: acciones especiales / etiquetas */
.boton-rosa{
  background:#db2777;
  border-color:#db2777;
  color:#fff;
}
.boton-rosa:hover{ filter:brightness(0.95); }


/* ===========================
   FIX: botón oscuro (negro)
   normal: negro + letra blanca
   hover: gris + letra blanca
   =========================== */

.boton-secundario,
a.boton-secundario,
button.boton-secundario {
  background: var(--secundario) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}

.boton-secundario:hover,
a.boton-secundario:hover,
button.boton-secundario:hover {
  background: #374151 !important; /* gris */
  color: #ffffff !important;      /* letra blanca */
  border: 1px solid #374151 !important;
}



/* Botones naranjas: letra blanca */
.boton-naranja,
.boton-panel {
  color: #ffffff !important;
}

.boton-naranja:hover,
.boton-panel:hover {
  color: #ffffff !important;
}

/* ===========================
   FIX: botones de colores
   Siempre letra blanca
   =========================== */

.boton-azul,
.boton-rojo,
.boton-verde,
.boton-violeta,
.boton-naranja,
.boton-bordo,
.boton-turquesa,
.boton-gris,
.boton-oscuro,
.boton-panel {
  color: #ffffff !important;
}

/* Hover: mantener letra blanca */
.boton-azul:hover,
.boton-rojo:hover,
.boton-verde:hover,
.boton-violeta:hover,
.boton-naranja:hover,
.boton-bordo:hover,
.boton-turquesa:hover,
.boton-gris:hover,
.boton-oscuro:hover,
.boton-panel:hover {
  color: #ffffff !important;
}


/* ===========================
   HOME V25 (solo pantalla /)
   =========================== */

.inicio-shell{
  --inicio-rojo: #0b4f9c;      /* ahora el "rojo" de la home pasa a ser celeste */
  --inicio-celeste: #d50000;   /* y el "celeste" pasa a ser rojo */
  --inicio-top: 90px;
  --inicio-side: 300px;

  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.inicio-fondo{
  position:absolute;
  inset:0;
  background-image: url("/estaticos/img/frente_casa_colon.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(55%);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.inicio-topbar{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--inicio-side) 1fr auto;
  height: var(--inicio-top);
  background: var(--inicio-rojo);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.inicio-logo-box{
  display:flex;
  align-items:center;
  justify-content:center;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12);
}

.inicio-logo{
  max-height: calc(var(--inicio-top) - 6px);
  max-width: calc(var(--inicio-side) - 10px);
  object-fit: contain;
}

.inicio-topbar-titulo{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 22px;
  padding: 0 14px;
  text-align: center;
}

.inicio-topbar-acciones{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding: 0 18px;
}

.inicio-boton-interno{
  text-decoration:none;
  font-weight: 900;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 12px 14px;
  border-radius: 12px;
  line-height: 1;
}

.inicio-boton-interno:hover{
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.55);
}

.inicio-cuerpo{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--inicio-side) 1fr;
  min-height: calc(100vh - var(--inicio-top) - 54px);
}

.inicio-menu{
  background: var(--inicio-celeste);
  padding: 18px 16px;
  display:flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 12px 0 30px rgba(0,0,0,0.10);
}

.inicio-menu-btn{
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-weight: 900;
  padding: 14px 14px;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
}

.inicio-menu-btn:hover{
  background: rgba(255,255,255,0.16);
}

.inicio-menu-btn.activo{
  background: #fff;
  color: #0f172a;
  border-color: #fff;
}

.inicio-main{
  padding: 26px 24px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.inicio-panel{
  width: 100%;
  max-width: 980px;
}

.inicio-card{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(226,232,240,0.95);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(15,23,42,0.10);
}

.inicio-card-titulo{
  font-weight: 900;
  font-size: 20px;
}

.inicio-card-sub{
  margin-top: 6px;
  color: #475569;
  font-weight: 800;
}

.inicio-disp-barra{
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) 110px; /* Personas fijo y chico */
  column-gap: 34px !important;
  row-gap: 18px !important;
  align-items: end;
}


/* CLAVE: permite que las columnas del grid no empujen hacia afuera */
.inicio-disp-barra > *{
  min-width: 0;
}

/* 4° campo = Complejo (abajo y ancho) */
.inicio-disp-barra > .inicio-disp-campo:nth-child(4){
  grid-column: 1 / span 2;
}

/* Botón Buscar: abajo a la derecha */
.inicio-disp-barra > .inicio-disp-buscar{
  grid-column: 3;
  justify-self: end;
  width: 100%;
  min-width: 120px;
}



/* 4° campo = Complejo (lo mandamos abajo y más ancho) */
.inicio-disp-barra > .inicio-disp-campo:nth-child(4){
  grid-column: 1 / span 2; /* ocupa 2 columnas */
}

/* Botón Buscar: abajo a la derecha */
.inicio-disp-barra > .inicio-disp-buscar{
  grid-column: 3;          /* tercera columna */
  justify-self: end;
  width: 100%;
  min-width: 110px;
}

@media (max-width: 780px){
  .inicio-disp-barra{
    grid-template-columns: 1fr;
  }

  .inicio-disp-barra > .inicio-disp-campo:nth-child(4){
    grid-column: auto;
  }

  .inicio-disp-barra > .inicio-disp-buscar{
    grid-column: auto;
    width: 100%;
  }
}


.inicio-disp-campo{
  width: 100%;
}


.inicio-disp-label{
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 6px;
}

.inicio-disp-input{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  padding: 0 12px;
  font-weight: 800;
  background: #fff;
  box-sizing: border-box;
  max-width: 100%;

}

.inicio-disp-input:focus{
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.inicio-disp-buscar{
  height: 44px;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 0 18px;
  background: #d50000;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.inicio-disp-buscar:hover{ opacity: 0.92; }
.inicio-disp-buscar:disabled{ opacity: 0.65; cursor: not-allowed; }

.inicio-msg{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

.inicio-msg.ok{ border-left: 6px solid #16a34a; }
.inicio-msg.error{ border-left: 6px solid #dc2626; }

.inicio-result-titulo{
  font-weight: 900;
  margin: 12px 0 10px;
}

.inicio-result-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.inicio-unidad{
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

.inicio-unidad-nombre{
  font-weight: 900;
  font-size: 16px;
}

.inicio-unidad-sub{
  margin-top: 4px;
  color: #475569;
  font-weight: 800;
  font-size: 13px;
}

.inicio-unidad-reservar{
  display:inline-flex;
  margin-top: 12px;
  text-decoration:none;
  background: #0b4f9c;
  color: #fff;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 12px;
}

.inicio-unidad-reservar:hover{ opacity: 0.92; }

.inicio-dato{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
}

.inicio-dato-et{
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
}

.inicio-dato-val{
  margin-top: 6px;
  font-weight: 900;
  font-size: 16px;
}

.inicio-form-label{
  font-weight: 900;
  font-size: 12px;
}

.inicio-form-input{
  height: 44px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  padding: 0 12px;
  font-weight: 800;
}

.inicio-form-botones{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-top: 6px;
}

.inicio-form-btn{
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: #d50000;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.inicio-form-btn:hover{ opacity: 0.92; }

.inicio-form-link{
  font-weight: 900;
  color: #0b4f9c;
  text-decoration: none;
}

.inicio-form-link:hover{ text-decoration: underline; }

.inicio-form-btn-sec{
  height: 44px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-weight: 900;
  color: #0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  margin-top: 4px;
}

.inicio-form-btn-sec:hover{ border-color: #0b4f9c; color: #0b4f9c; }

.inicio-condiciones{
  margin-top: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  max-height: 55vh;
  overflow: auto;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
}

.inicio-footer{
  position: relative;
  z-index: 2;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  background: rgba(15,23,42,0.92);
  color: rgba(255,255,255,0.95);
  font-weight: 900;
}

.inicio-footer-item{ opacity: 0.95; }

@media (max-width: 980px){
  .inicio-shell{ --inicio-side: 260px; --inicio-top: 84px; }
  .inicio-result-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  .inicio-shell{ --inicio-side: 1fr; --inicio-top: 78px; }
  .inicio-topbar{ grid-template-columns: 110px 1fr auto; }
  .inicio-cuerpo{ grid-template-columns: 1fr; }
  .inicio-menu{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
  }
  .inicio-menu-btn{ flex: 1 1 46%; }
  .inicio-result-grid{ grid-template-columns: 1fr; }
}


/* =========================================
   FUENTES NORMALES (sin negrita) EN TODA LA APP
   EXCEPTO en la pantalla INICIO (inicio-shell)
   ========================================= */

/* Header (en todas las pantallas donde se ve) */
.header, .header *{
  font-weight: 400 !important;
}

/* Todo el contenido general, excepto HOME (inicio-shell) */
main.contenedor > :not(.inicio-shell),
main.contenedor > :not(.inicio-shell) *{
  font-weight: 400 !important;
}

/* =========================================================
   HEADER GLOBAL FINAL (toda la app)
   - Rojo sólido como INICIO (#d50000)
   - Alto como INICIO (90px)
   - Campana + Panel + Salir alineados
   - Fecha/hora abajo, sin fondo, ancho igual a Panel+Salir
   ========================================================= */

:root{
  --agmer-rojo: #0b4f9c;
  --agmer-header-alto: 90px;
}

.header{
  background: var(--agmer-rojo) !important;
  height: var(--agmer-header-alto) !important;
  color: #fff !important;
  border-bottom: none !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18) !important;
  overflow: visible !important; /* evita cortes */
}

.header-contenido{
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 120px 0 28px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
}

.header .logo{
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
}

.header-titulo{
  font-size: 24px !important;
  text-align: center !important;
  color: #fff !important;
  white-space: nowrap !important;
}

.header-derecha{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  margin-right: 60px !important;   /* mueve todo el bloque a la izquierda */
  transform: translateX(-20px) !important; /* ajuste fino (opcional) */

}

/* Bienvenida sin negrita (igual que pediste) */
.header-bienvenida{
  white-space: nowrap !important;
  color: #fff !important;
}

/* Botones/campana: MISMA ALTURA y centrados */
.header-boton{
  height: 44px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Contenedor: botones arriba (2) + fecha/hora abajo */
.header-acciones{
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
  justify-items: stretch !important;
}

/* Panel + Salir arriba */
.header-botones{
  display: grid !important;
  grid-template-columns: 44px 1fr 1fr !important; /* campana + Panel + Salir */
  gap: 10px !important;
  min-width: 320px !important; /* evita recortes */
  align-items: center !important;
}

.header-campana{
  width: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
}

/* Fecha/hora abajo: SIN fondo, mismo ancho que Panel+Salir */
.header-fecha{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.92) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Botón Panel siempre naranja (reforzado) */
.boton-panel{
  background: var(--alerta, #f59e0b) !important;
  border-color: var(--alerta, #f59e0b) !important;
  color: #111827 !important;
}
.boton-panel:hover{
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #111827 !important;
}

/* =========================================================
   FUENTES NORMALES (sin negrita) EN TODA LA APP (incluye INICIO)
   ========================================================= */
body, body *{
  font-weight: 400 !important;
}


/* Fuerza Panel naranja incluso si boton-secundario lo pisa */
.header a.boton-panel,
.header a.boton.boton-panel{
  background: var(--alerta, #f59e0b) !important;
  border-color: var(--alerta, #f59e0b) !important;
  color: #111827 !important;
}
.header a.boton-panel:hover{
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #111827 !important;
}