/* ============================================
   COMPONENTS.CSS — COMPONENTES REUTILIZABLES CGE
   ============================================ */

/* ------------------------------
   BOTONES
------------------------------ */
.btn {
    display: inline-block;
    padding: 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

/* Primario */
.btn-primary {
    background: var(--cge-rojo);
    color: var(--cge-blanco);
}
.btn-primary:hover {
    background: #7a161a;
}

/* Secundario */
.btn-secondary {
    background: var(--cge-amarillo);
    color: var(--cge-negro);
}
.btn-secondary:hover {
    background: #d87f2f;
}

/* Outline */
.btn-outline {
border: 2px solid var(--cge-rojo); color: var(--cge-rojo); background: transparent; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: bold; text-decoration: none; transition: all 0.2s ease;
}

.btn-outline:hover {
    background: var(--cge-rojo);
    color: var(--cge-blanco);
}


/* Icon button */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ------------------------------
   TABLAS
------------------------------ */
table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-suave);
}

thead {
    background: var(--cge-rojo);
    color: white;
}

th, td {
    padding: 14px 18px;
    text-align: left;
}

tbody tr:nth-child(even) {
    background: var(--gris-claro);
}

tbody tr:hover {
    background: var(--gris-medio);
}

/* ------------------------------
   CARDS
------------------------------ */
.card {
    background: white;
    padding: 25px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-suave);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-media);
}

/* Card de documento */
.card-doc {
    border-left: 6px solid var(--cge-rojo);
}

/* ------------------------------
   CARD HORIZONTAL (imagen arriba)
------------------------------ */
.card-horizontal {
  display: flex;
  flex-direction: row;
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--cge-blanco);
  box-shadow: var(--shadow-suave);
  max-width: 960px;
  margin: 0 auto 32px auto; /* centrado + separación entre cards */
  width: 100%;
  box-sizing: border-box;
}

/* Imagen */
.card-horizontal img {
  width: 240px;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

/* Contenido */
.card-horizontal .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-horizontal hover {
    
    box-shadow: var(--shadow-media);
}

/* Responsivo */
@media (max-width: 768px) {
  .card-horizontal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
  }

  .card-horizontal img {
    width: 100%;
    max-width: 320px;
    margin-bottom: 16px;
  }

  .card-horizontal .card-content {
    align-items: center;
  }
}


/* vertical card*/

.card-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0px;
  border-radius: var(--radius);
  background: var(--cge-blanco);
  box-shadow: var(--shadow-suave);
  max-width: 360px;
  margin: 0 ;
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
  height: auto;
}

/* Imagen */
.card-vertical img {
  width: 100%;
  height: 60%;
  object-fit: cover;
  border-radius: var(--radius)
  margin-bottom: 16px;
  padding-bottom: 0.4rem;
}

/* Contenido */
.card-vertical .card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* Tipografía */
.card-vertical .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cge-negro);
}

.card-vertical .card-subtitle {
  font-size: 1rem;
  font-weight: 500;
  color: var(--cge-rojo);
}

.card-vertical .card-quote {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--cge-gris);
}

.card-vertical hover {
    
    box-shadow: var(--shadow-media);
}

/* ------------------------------
   ALERTAS
------------------------------ */
.alert {
    padding: 15px 20px;
    border-radius: var(--radius);
    margin: 15px 0;
    font-weight: 500;
}

.alert-success {
    background: #d4f8d4;
    color: #1a7a1a;
}

.alert-warning {
    background: #fff3cd;
    color: #856404;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
}

/* ------------------------------
   INPUTS / FORMULARIOS
------------------------------ */
.input {
    width: 100%;
    padding: 12px 15px;
    border-radius: var(--radius);
    border: 1px solid var(--gris-medio);
    transition: var(--transition);
}

.input:focus {
    border-color: var(--cge-rojo);
    outline: none;
    box-shadow: 0 0 0 3px rgba(152,28,33,0.2);
}

/* ------------------------------
   BADGES / ETIQUETAS
------------------------------ */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-ok { background: #d4f8d4; color: #1a7a1a; }
.badge-warn { background: #fff3cd; color: #856404; }
.badge-pend { background: #f8d7da; color: #721c24; }

/* ------------------------------
   MODAL
------------------------------ */
.modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
}

.modal {
    background: white;
    padding: 30px;
    border-radius: var(--radius);
    width: min(90%, 500px);
    box-shadow: var(--shadow-media);
}

/* ------------------------------
   BREADCRUMB
------------------------------ */
.breadcrumb {
    display: flex;
    gap: 8px;
    font-size: 0.9rem;
    margin: 20px 0;
}

.breadcrumb a {
    color: var(--cge-rojo);
    text-decoration: none;
}

.breadcrumb span {
    color: var(--gris-oscuro);
}

/* ------------------------------
   PAGINACIÓN
------------------------------ */
.pagination {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.pagination a {
    padding: 8px 14px;
    border-radius: var(--radius);
    background: var(--gris-claro);
    text-decoration: none;
    color: var(--cge-negro);
    transition: var(--transition);
}

.pagination a:hover {
    background: var(--cge-rojo);
    color: white;
}

/* ------------------------------
   ACCORDION
------------------------------ */
.accordion {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-suave);
}

.accordion-item {
    border-bottom: 1px solid var(--gris-medio);
}

.accordion-header {
    padding: 15px;
    background: white;
    cursor: pointer;
    font-weight: 600;
}

.accordion-content {
    padding: 15px;
    display: none;
    background: var(--gris-claro);
}

/* ------------------------------
   TABS
------------------------------ */
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab {
    padding: 10px 18px;
    border-radius: var(--radius);
    background: var(--gris-claro);
    cursor: pointer;
    transition: var(--transition);
}

.tab.active {
    background: var(--cge-rojo);
    color: white;
}

/* ------------------------------
   MINI LOADER
------------------------------ */
.mini-loader {
    width: 28px;
    height: 28px;
    border: 3px solid var(--gris-medio);
    border-top-color: var(--cge-rojo);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   PAGE HEADER — ENCABEZADO DE PÁGINA
============================================ */
.page-header {
    margin-bottom: 35px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gris-medio);
}

.page-header h1 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--cge-negro);
}

.page-header p {
    margin-top: 6px;
    color: var(--gris-oscuro);
    font-size: 1rem;
}

/* ============================================
   CGE SECTION — BLOQUES DE CONTENIDO
============================================ */
.cge-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.cge-section h2 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--cge-negro);
    font-weight: 600;
}

.nav__list a {
  color: var(--cge-negro);
  text-decoration: none;
  font-weight: 500;
  display: block;
  padding: 10px 0;
}

.nav__list a:hover {
  color: var(--cge-rojo);
  background: var(--gris-claro);
}


/* ============================================
   ACCESIBILIDAD — ESTILOS ALTERNATIVOS POR COMPONENTE
============================================ */

/* ------------------------------
   BOTONES
------------------------------ */
.btn.contraste {
    background: var(--cge-negro) !important;
    color: var(--cge-blanco) !important;
    border: 2px solid var(--cge-rojo) !important;
}
.btn.contraste:hover {
    background: var(--cge-rojo) !important;
}

/* ------------------------------
   CARDS
------------------------------ */
.card.contraste {
    background: var(--cge-negro) !important;
    color: var(--cge-blanco) !important;
    border: 2px solid var(--cge-rojo);
    box-shadow: none !important;
}
/* Títulos y textos dentro de cards en contraste */
.card.contraste h1,
.card.contraste h2,
.card.contraste h3,
.card.contraste h4,
.card.contraste p,
.card.contraste span,
.card.contraste a {
    color: var(--cge-blanco) !important;
}


/* ------------------------------
   TABLAS
------------------------------ */
table.contraste {
    background: var(--cge-negro) !important;
    color: var(--cge-blanco) !important;
    border: 2px solid var(--cge-rojo);
}
table.contraste thead {
    background: var(--cge-rojo) !important;
}
table.contraste tbody tr:nth-child(even) {
    background: #333 !important;
}
table.contraste tbody tr:hover {
    background: #444 !important;
}

/* ------------------------------
   ALERTAS
------------------------------ */
.alert.contraste {
    background: var(--cge-negro) !important;
    color: var(--cge-blanco) !important;
    border-left: 6px solid var(--cge-rojo);
}

/* ------------------------------
   INPUTS
------------------------------ */
.input.contraste {
    background: var(--cge-negro) !important;
    color: var(--cge-blanco) !important;
    border: 2px solid var(--cge-rojo) !important;
}

/* ------------------------------
   BADGES
------------------------------ */
.badge.contraste {
    background: var(--cge-negro) !important;
    color: var(--cge-blanco) !important;
    border: 1px solid var(--cge-rojo);
}

/* ------------------------------
   ACCORDION
------------------------------ */
.accordion.contraste {
    background: var(--cge-negro) !important;
    color: var(--cge-blanco) !important;
    border: 2px solid var(--cge-rojo);
}
.accordion-header.contraste {
    background: var(--cge-negro) !important;
}
.accordion-content.contraste {
    background: #333 !important;
}

/* ------------------------------
   TABS
------------------------------ */
.tab.contraste {
    background: var(--cge-negro) !important;
    color: var(--cge-blanco) !important;
    border: 1px solid var(--cge-rojo);
}
.tab.contraste.active {
    background: var(--cge-rojo) !important;
}

/* ------------------------------
   Header
------------------------------ */
.page-header.contraste {
    border-bottom-color: var(--cge-rojo);
}

.page-header.contraste h1,
.page-header.contraste p {
    color: var(--cge-black) !important;
}

/* ------------------------------
   seccion
------------------------------ */

/* Versión contraste */
.cge-section.contraste h2 {
    color: var(--cge-blanco) !important;
}

/* ------------------------------
   CARD HORIZONTAL — CONTRASTE
------------------------------ */
.card-horizontal.contraste {
  background: var(--cge-negro) !important;
  color: var(--cge-blanco) !important;
  border: 2px solid var(--cge-rojo);
  box-shadow: none !important;
}

.card-horizontal.contraste h3,
.card-horizontal.contraste .cargo,
.card-horizontal.contraste .bio {
  color: var(--cge-blanco) !important;
}

.card-horizontal.contraste img {
  border-bottom: 2px solid var(--cge-rojo);
}

/* CONTRASTE para card vertical */
.card-vertical.contraste {
  background: var(--cge-negro)!important;
  color: var(--cge-blanco) !important;
 border: 2px solid var(--cge-rojo);
}

.card-vertical.contraste .card-title,
.card-vertical.contraste .card-subtitle,
.card-vertical.contraste .card-quote {
  color: #fff !important;
}