/* ==========================================================================
   panel-rebrand.css — Capa de REBRANDING v1 (2026-09).
   Se carga DESPUES de panel.css. Es 100% ADITIVA: no renombra ni borra nada,
   y solo toca propiedades que NINGUNA regla responsive de panel.css modifica
   (fondos, sombras, bordes, radios, chips de icono, acentos) — por eso el
   celular sigue intacto. Todo con los tokens existentes: el modo claro/oscuro
   y el toggle de tema siguen funcionando solos. Para revertir: quitar el
   <link> de este archivo en index.html.
   ========================================================================== */

/* --- Forma general un poco mas moderna (esquinas mas suaves) --- */
:root { --radio: 13px; --radio-sm: 9px; }

/* ========================== MENU LATERAL ================================== */
/* Marca R&H arriba del menu (elemento nuevo .sidebar-brand en index.html) */
.sidebar-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 10px 16px; margin: 0 0 6px;
  border-bottom: 1px solid var(--borde);
}
.sidebar-brand .sb-mark {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  background: var(--header-grad); box-shadow: var(--sombra-md);
  display: grid; place-items: center; position: relative;
}
/* La marca de 4 cuadros (varias sedes), en blanco, hecha sin ninguna imagen */
.sidebar-brand .sb-mark::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px; background: #fff;
  box-shadow: 9px 0 0 #fff, 0 9px 0 #fff, 9px 9px 0 rgba(255, 255, 255, 0.5);
  transform: translate(-4px, -4px);
}
.sidebar-brand .sb-txt b {
  display: block; font-size: 14.5px; letter-spacing: -0.01em; line-height: 1.15;
  color: var(--texto);
}
.sidebar-brand .sb-txt i {
  display: block; font-style: normal; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave);
}

/* Icono de cada seccion dentro de un "chip" redondeado */
.sidebar-ico {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--superficie-2); color: var(--texto-medio);
  transition: background var(--dur-rapida) var(--ease-suave),
              color var(--dur-rapida) var(--ease-suave);
}
.sidebar-link:hover .sidebar-ico { background: var(--primario-tinte); color: var(--primario); }
.sidebar-link.active { box-shadow: inset 3px 0 0 var(--primario); }
.sidebar-link.active .sidebar-ico { background: var(--primario); color: #fff; }

/* ========================== BARRA SUPERIOR =============================== */
.app-header .btn-ghost { border-radius: 9px; }
.app-header .user-name { font-weight: 650; }

/* ========================== INDICADORES (KPIs) ========================== */
/* Un tinte suave arriba, del color de cada tarjeta: premium y cohesivo.
   NO se toca padding ni tamano del numero (de eso se encarga el responsive). */
.stat            { background: linear-gradient(180deg, var(--primario-tinte) 0%, var(--superficie) 44%); }
.stat.is-exito   { background: linear-gradient(180deg, var(--exito-tinte)    0%, var(--superficie) 44%); }
.stat.is-alerta  { background: linear-gradient(180deg, var(--alerta-tinte)   0%, var(--superficie) 44%); }
.stat.is-peligro { background: linear-gradient(180deg, var(--peligro-tinte)  0%, var(--superficie) 44%); }
.stat::before    { width: 5px; }

/* ========================== BOTONES ===================================== */
.btn-primario { box-shadow: 0 6px 16px -8px rgba(26, 60, 143, 0.55); }
.btn-primario:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(26, 60, 143, 0.62); }

/* ========================== TARJETAS Y LOGIN =========================== */
.login-card { box-shadow: var(--sombra-md); }

/* ========================== LOGO DE SEDE (branding) ==================== */
/* Clases NUEVAS (aditivas). La mini (~34px) va DENTRO de la celda Nombre de la
   tabla, no en una columna nueva; el preview (~96px) va en el modal de detalle.
   El placeholder .sede-logo-ph muestra la inicial cuando la sede no tiene logo.
   Va después de .sede-logo-mini/.sede-logo-preview a propósito: comparte igual
   especificidad y necesita ganar el fondo (por eso queda declarado más abajo). */

/* Celda Nombre: la mini y el texto en fila */
.sede-nombre-cel { display: flex; align-items: center; gap: 10px; }
.sede-nombre-txt { min-width: 0; }

/* Mini de la tabla (~34px) */
.sede-logo-mini {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 9px; border: 1px solid var(--borde);
  object-fit: cover; overflow: hidden;
  background: var(--superficie-2);
  display: inline-grid; place-items: center;
}

/* Sección del logo en el modal de detalle */
.sede-logo-fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sede-logo-ctrl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Preview del modal (~96px) */
.sede-logo-preview {
  width: 96px; height: 96px; flex: 0 0 auto;
  border-radius: var(--radio); border: 1px solid var(--borde);
  object-fit: cover; overflow: hidden;
  background: var(--superficie-2);
  display: inline-grid; place-items: center;
}

/* Placeholder con la inicial (sirve para la mini y para el preview) */
.sede-logo-ph {
  background: var(--primario-tinte); color: var(--primario);
  font-weight: 800; text-transform: uppercase;
  font-size: 15px; line-height: 1;
}
.sede-logo-preview.sede-logo-ph { font-size: 40px; }

/* ========================== CELULAR ==================================== */
/* La marca del menu estorba cuando el menu pasa a fila horizontal arriba. */
@media (max-width: 640px) {
  .sidebar-brand { display: none; }
}