/* Panel del Colegio (/admin): el aspecto de la maqueta del panel (desarrollo/archivo/maqueta-panel/assets/panel.css),
   que es el que prefiere el Colegio: barra verde oliva de lado a lado, menú lateral blanco y compacto, fondo crema,
   tarjetas blancas y la pantalla de acceso sobre verde oscuro. Solo en modo claro (salvo la marca); el modo oscuro de
   Filament se queda como está. Se carga desde AdminPanelProvider, que pone también la marca, «Ver web» y el nombre de
   quien ha entrado (resources/views/filament/). */
:root {
  --cppa-bg: #F4F6EC;
  --cppa-line: #E5E8DC;
  --cppa-line-soft: #F0F2EA;
  --cppa-olive: #9DBE54;
  --cppa-olive-mid: #7C9132;
  --cppa-olive-dark: #5C7026;
  --cppa-olive-darker: #2E3E10;
  --cppa-olive-soft: #F1F6E1;
  --cppa-amber: #D4A41C;
  --cppa-text: #1F2516;
  --cppa-text-soft: #404740;
  --cppa-muted: #6B7363;
  --cppa-radio: 8px;
  --cppa-barra: 58px;
  --cppa-sombra: 0 1px 3px rgba(46, 62, 16, .07), 0 1px 2px rgba(46, 62, 16, .05);
}

/* ---------- marca: cuadradito con el icono + «CPPA · Panel» (y «Pruebas» fuera de producción) ---------- */
.cppa-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #fff;
}
.cppa-marca-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .16);
}
.cppa-marca-logo svg { width: 18px; height: 18px; }
.cppa-marca-larga { display: none; }
.cppa-marca-pruebas {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cppa-amber);
  color: var(--cppa-olive-darker);
}
/* en la pantalla de acceso (tarjeta blanca): nombre completo en verde oscuro */
.fi-simple-header .cppa-marca { gap: 11px; white-space: normal; font-weight: 800; color: var(--cppa-olive-darker); }
.fi-simple-header .cppa-marca-logo { width: 38px; height: 38px; border-radius: 9px; background: var(--cppa-olive-soft); color: var(--cppa-olive-dark); }
.fi-simple-header .cppa-marca-corta { display: none; }
.fi-simple-header .cppa-marca-larga { display: inline; }
html.dark .fi-simple-header .cppa-marca { color: #fff; }
html.dark .fi-simple-header .cppa-marca-logo { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- «Ver web» y nombre de quien ha entrado, junto al avatar ---------- */
.cppa-ver-web { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255, 255, 255, .92); }
.cppa-ver-web:hover, .cppa-ver-web:focus-visible { color: #fff; }
.cppa-ver-web svg { width: 16px; height: 16px; }
.cppa-usuario {
  margin-inline-start: -8px;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
@media (max-width: 639px) {
  .cppa-ver-web span, .cppa-usuario { display: none; }
}

/* ---------- fondo general: crema ---------- */
html:not(.dark) .fi-body { background-color: var(--cppa-bg); }

/* ---------- barra superior: verde oliva de lado a lado (la cabecera del menú la continúa) ---------- */
html:not(.dark) .fi-topbar > nav,
html:not(.dark) .fi-sidebar-header {
  height: var(--cppa-barra);
  background-color: var(--cppa-olive-dark);
  box-shadow: none;
}
html:not(.dark) .fi-sidebar-header { padding-inline: 18px; }
html:not(.dark) .fi-topbar .fi-icon-btn,
html:not(.dark) .fi-sidebar-header .fi-icon-btn { color: rgba(255, 255, 255, .85); }
html:not(.dark) .fi-topbar .fi-icon-btn:hover,
html:not(.dark) .fi-topbar .fi-icon-btn:focus-visible,
html:not(.dark) .fi-sidebar-header .fi-icon-btn:hover { color: #fff; background-color: rgba(255, 255, 255, .12); }
html:not(.dark) .fi-topbar .fi-input-wrp { background-color: rgba(255, 255, 255, .96); }

/* ---------- menú lateral: blanco y compacto; grupos en gris y en mayúsculas; la sección abierta, en verde clarito ---------- */
@media (min-width: 1024px) {
  html:not(.dark) .fi-sidebar { background-color: #fff; border-inline-end: 1px solid var(--cppa-line); }
}
html:not(.dark) .fi-sidebar-nav { padding: 14px 12px; row-gap: 0; scrollbar-width: thin; scrollbar-color: #D1D6C5 transparent; }
html:not(.dark) .fi-sidebar-nav-groups { margin-inline: 0; row-gap: 0; }
html:not(.dark) .fi-sidebar-group { row-gap: 0; }
html:not(.dark) .fi-sidebar-group-button { padding: 14px 12px 6px; }
html:not(.dark) .fi-sidebar-group-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cppa-muted);
}
html:not(.dark) .fi-sidebar-group-items { row-gap: 2px; }
html:not(.dark) .fi-sidebar-item-button {
  justify-content: flex-start;
  gap: 11px;
  padding: 9px 12px;
  border-left: 3px solid transparent;
  border-radius: var(--cppa-radio);
}
html:not(.dark) .fi-sidebar-item-button .fi-sidebar-item-icon { width: 19px; height: 19px; color: var(--cppa-text-soft); }
html:not(.dark) .fi-sidebar-item-button .fi-sidebar-item-label { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--cppa-text-soft); }
html:not(.dark) .fi-sidebar-item-button:hover,
html:not(.dark) .fi-sidebar-item-button:focus-visible,
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-button { background-color: var(--cppa-olive-soft); }
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-button { border-left-color: var(--cppa-olive-mid); }
html:not(.dark) .fi-sidebar-item-button:hover .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
html:not(.dark) .fi-sidebar-item-button:focus-visible .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-button:focus-visible .fi-sidebar-item-icon,
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon { color: var(--cppa-olive-dark); }

/* ---------- cabecera de cada página ---------- */
html:not(.dark) .fi-header-heading { font-size: 23px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; color: var(--cppa-text); }
html:not(.dark) .fi-breadcrumbs,
html:not(.dark) .fi-breadcrumbs-item-label { font-size: 12.5px; color: var(--cppa-muted); }

/* ---------- tarjetas, tablas y resúmenes: blancos, con borde fino sobre el crema ---------- */
html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-fo-tabs,
html:not(.dark) .fi-wi-stats-overview-stat {
  border: 1px solid var(--cppa-line);
  border-radius: var(--cppa-radio);
  box-shadow: var(--cppa-sombra);
}
html:not(.dark) .fi-section-header-heading { font-size: 15px; font-weight: 800; color: var(--cppa-text); }
html:not(.dark) .fi-section-content-ctn { border-top-color: var(--cppa-line-soft); }

/* resúmenes del escritorio: cifra grande en negrita */
html:not(.dark) .fi-wi-stats-overview-stat-label { font-size: 12.5px; color: var(--cppa-muted); }
html:not(.dark) .fi-wi-stats-overview-stat-value { font-size: 28px; font-weight: 800; color: var(--cppa-text); }

/* tablas: cabecera tintada en mayúsculas y fila resaltada al pasar */
html:not(.dark) .fi-ta-header-cell { background-color: var(--cppa-line-soft); }
html:not(.dark) .fi-ta-header-cell,
html:not(.dark) .fi-ta-header-cell button,
html:not(.dark) .fi-ta-header-cell span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cppa-muted);
}
html:not(.dark) .fi-ta-row:hover { background-color: var(--cppa-olive-soft); }

/* acciones de cada fila (Editar, Borrar, Ver…): fijas a la derecha, para que no se pierdan cuando la tabla no cabe
   y hay que desplazarla de lado */
html:not(.dark) .fi-ta-actions-cell,
html:not(.dark) .fi-ta-actions-header-cell {
  position: sticky;
  right: 0;
  z-index: 1;
  background-color: #fff;
  box-shadow: inset 1px 0 0 var(--cppa-line);
}
html:not(.dark) .fi-ta-actions-header-cell { background-color: var(--cppa-line-soft); }
html:not(.dark) .fi-ta-row.bg-gray-50 > .fi-ta-actions-cell { background-color: rgb(var(--gray-50)); }
html:not(.dark) .fi-ta-row:hover > .fi-ta-actions-cell { background-color: var(--cppa-olive-soft); }

/* ---------- pantalla de acceso: tarjeta blanca sobre verde oscuro ---------- */
html:not(.dark) .fi-simple-layout { background-color: var(--cppa-olive-darker); }
html:not(.dark) .fi-simple-main-ctn { padding-inline: 16px; }
html:not(.dark) .fi-simple-main {
  max-width: 400px;
  padding: 34px 32px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.fi-simple-header { align-items: flex-start; }
html:not(.dark) .fi-simple-header-heading { font-size: 20px; text-align: left; letter-spacing: normal; color: var(--cppa-text); }
html:not(.dark) .fi-simple-header-subheading { text-align: left; }
.cppa-acceso-pie { margin: 4px 0 0; text-align: center; font-size: 12.5px; }
.cppa-acceso-pie a { font-weight: 600; color: var(--cppa-olive-dark); }
html.dark .cppa-acceso-pie a { color: #fff; }

/* ---------- banco de imágenes (ImagenResource) y «Elegir del banco» en la ficha de una noticia ---------- */
.cppa-banco-foto { object-fit: cover; border-radius: 6px; background: var(--cppa-line-soft); }
.cppa-banco-vista { display: block; max-width: 100%; max-height: 340px; margin: 0 auto; border-radius: 8px; }
.cppa-banco-datos { margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--cppa-muted); }
.cppa-banco-enlace { font-weight: 600; color: var(--cppa-olive-dark); }
.cppa-banco-enlace:hover { text-decoration: underline; }

.cppa-elegir-buscar {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cppa-line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--cppa-text);
  background: #fff;
}
.cppa-elegir-buscar:focus { outline: none; border-color: var(--cppa-olive-dark); box-shadow: 0 0 0 3px rgba(157, 190, 84, .28); }
.cppa-elegir-total { margin: 10px 0 12px; font-size: 13px; color: var(--cppa-muted); }
.cppa-elegir-cargando { color: var(--cppa-olive-dark); }
.cppa-elegir-vacio { padding: 24px 0; text-align: center; color: var(--cppa-muted); }
.cppa-elegir-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cppa-elegir-foto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--cppa-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cppa-elegir-foto:hover,
.cppa-elegir-foto:focus-visible { outline: none; border-color: var(--cppa-olive-dark); box-shadow: 0 0 0 3px rgba(157, 190, 84, .28); }
.cppa-elegir-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 5px; background: var(--cppa-line-soft); }
.cppa-elegir-foto span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--cppa-text-soft);
}
.cppa-elegir-mas {
  display: block;
  margin: 16px auto 0;
  padding: 9px 18px;
  border: 1px solid var(--cppa-line);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cppa-olive-dark);
  cursor: pointer;
}
.cppa-elegir-mas:hover { border-color: var(--cppa-olive-dark); }