:root{
  /* Paleta neutral para reemplazar el verde / concho-vino */
  --vino: #111111;          /* casi negro */
  --verde: #222222;         /* gris muy oscuro */
  --vino-contrast: #f5f5f5; /* texto claro sobre fondos oscuros */
  --verde-contrast: #f5f5f5;
  /* Si en algún lado usan un gradiente por variables, sugerimos este */
  --gradiente-principal: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 100%);
}

/* Header negro sobrio */
.card-header.gradient{
  background: linear-gradient(180deg, #111, #222) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Altura y centrado del header del login */
.card-header.gradient{
  /* ya tienes el fondo y color, dejamos eso igual */
  min-height: 64px;           /* más alto sin desbordar */
  padding: 10px 16px;         /* respiración */
  display: flex;              /* centra contenido */
  align-items: center;
  justify-content: center;
  border-top-left-radius: 1rem;   /* mantiene la curvatura del card */
  border-top-right-radius: 1rem;
}

/* ====== INDEX (y vistas afines): estilos oscuros unificados ====== */

/* Barra superior del index */
.header-estudiante{
  background: linear-gradient(180deg, #1c1c1c, #0f0f0f) !important;
  color:#fff;
  padding: 34px 0;
  margin-bottom: 24px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  border-radius: 16px;
}

/* Encabezados de tarjetas dentro de .neo en oscuro */
.neo .card-header{
  background: linear-gradient(180deg, #1d1d1d, #0f0f0f) !important;
  color:#fff !important;
  border:0 !important;
}

/* Botón principal oscuro con neumorphism */
.btn-neo{
  background: linear-gradient(180deg, #1d1d1d, #0f0f0f) !important;
  border:0 !important;
  color:#fff !important;
  font-weight:700;
  border-radius:12px;
  box-shadow: 10px 10px 20px rgba(0,0,0,.25), -10px -10px 20px rgba(255,255,255,.05);
}
.btn-neo:hover{
  filter:brightness(1.05);
  box-shadow: 12px 12px 24px rgba(0,0,0,.28), -12px -12px 24px rgba(255,255,255,.05);
}
.btn-neo:active{
  box-shadow: inset 10px 10px 20px rgba(0,0,0,.22), inset -10px -10px 20px rgba(255,255,255,.06);
}


/* ====== ADMIN_DASHBOARD (y vistas afines): estilos oscuros unificados ====== */

/* Navbar oscura con look neutro */
.navbar,
.navbar.navbar-light,
.navbar.navbar-dark{
  background: linear-gradient(180deg, #1c1c1c, #0f0f0f) !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}

/* Tarjetas con neumorphism */
.neo{
  background: linear-gradient(145deg,#f1f4f9,#e8edf6) !important;
  border:1px solid rgba(0,0,0,.04) !important;
  border-radius:22px !important;
  box-shadow: 18px 18px 36px #c0c9da, -18px -18px 36px #ffffff, 0 14px 32px rgba(0,0,0,.10);
}

/* Botón principal neutro */
.btn-neo{
  background: linear-gradient(180deg, #1d1d1d, #0f0f0f) !important;
  border:0 !important; color:#fff !important; font-weight:700; border-radius:12px;
  box-shadow: 10px 10px 20px rgba(0,0,0,.25), -10px -10px 20px rgba(255,255,255,.05);
}
.btn-neo:hover{ filter:brightness(1.05); box-shadow:12px 12px 24px rgba(0,0,0,.28), -12px -12px 24px rgba(255,255,255,.05) }
.btn-neo:active{ box-shadow: inset 10px 10px 20px rgba(0,0,0,.22), inset -10px -10px 20px rgba(255,255,255,.06) }


/* ====== ADMIN / REGISTROS (neutro oscuro) ====== */

/* Título de sección */
.section-title{
  background: linear-gradient(180deg, #1c1c1c, #0f0f0f) !important;
  color:#fff !important;
  padding: 1rem;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* Encabezados de cards (usa .gradient en el HTML) */
.card-header.gradient{
  background: linear-gradient(180deg, #1d1d1d, #0f0f0f) !important;
  color:#fff !important;
  border:none;
}

/* Píldoras activas (PPP-I / PPP-II) */
.nav-pills .nav-link.active{
  background: linear-gradient(180deg, #1d1d1d, #0f0f0f) !important;
  color:#fff !important;
}

/* Botones principales del módulo */
.btn-neo{
  background: linear-gradient(180deg, #1d1d1d, #0f0f0f) !important;
  border:0 !important; color:#fff !important; font-weight:700; border-radius:12px;
  box-shadow: 10px 10px 20px rgba(0,0,0,.25), -10px -10px 20px rgba(255,255,255,.05);
}
.btn-neo:hover{ filter:brightness(1.05); box-shadow:12px 12px 24px rgba(0,0,0,.28), -12px -12px 24px rgba(255,255,255,.05) }
.btn-neo:active{ box-shadow: inset 10px 10px 20px rgba(0,0,0,.22), inset -10px -10px 20px rgba(255,255,255,.06) }

/* Tarjeta base neumórfica */
.neo{
  background: linear-gradient(145deg,#f1f4f9,#e8edf6) !important;
  border:1px solid rgba(0,0,0,.04) !important;
  border-radius: 22px !important;
  box-shadow: 18px 18px 36px #c0c9da, -18px -18px 36px #ffffff, 0 14px 32px rgba(0,0,0,.10);
}



/* Filtros de escuela (neutros) */
.escuela-filter{
  background: transparent !important;
  border: 1px solid #1f1f1f !important;
  color: #1f1f1f !important;
  border-radius:10px; padding:.6rem 1rem;
}
.escuela-filter.active{
  background: linear-gradient(180deg, #1d1d1d, #0f0f0f) !important;
  color:#fff !important;
  border-color: transparent !important;
}

/* Texto con degradado oscuro (si quieres mantener títulos con “glow”) */
.grad-text-dark{
  background: linear-gradient(180deg,#2e2e2e,#0f0f0f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Utilidades de tabla para Admin > Solicitudes */
.table-wrap { max-height: 520px; overflow: auto; }
thead.sticky { position: sticky; top: 0; z-index: 1; }



/* Separador para navbar fixed-top */
.nav-offset { height: 96px; }
@media (min-width: 768px){ .nav-offset { height: 104px; } }



/* =========================
   Calificar Anexo 02 – Dark Neomorphism (con contraste)
   ========================= */

/* Header (lo mantenemos) */
.header-admin{
  background: linear-gradient(180deg, #1c1c1c, #0f0f0f) !important;
  color:#fff;
  padding: 24px 0;
  margin-bottom: 24px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  border-radius: 16px;
}

/* Tarjeta “Información del Registro” (oscura) */
.info-estudiante-dark{
  background: linear-gradient(180deg, #171717, #111111);
  color: #eaeaea;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 10px 10px 20px rgba(0,0,0,.25), -10px -10px 20px rgba(255,255,255,.03);
}

/* ===== Criterios: header oscuro + cuerpo blanco ===== */
.calificar-anexo02 .criterio-card{ 
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow: 8px 8px 20px rgba(0,0,0,.08), -8px -8px 20px rgba(255,255,255,.28);
}
.calificar-anexo02 .criterio-card .card-header{
  background: linear-gradient(180deg,#1d1d1d,#0f0f0f) !important;
  color:#fff !important;
  border:none !important;
  border-top-left-radius:18px !important;
  border-top-right-radius:18px !important;
}
.calificar-anexo02 .criterio-card .card-body{
  background:#fff !important;
  color:#111 !important;
}
.calificar-anexo02 .criterio-card .card-body p,
.calificar-anexo02 .criterio-card .card-body small,
.calificar-anexo02 .criterio-card .card-body h6{ color:#111 !important; }

/* ===== Botones de puntaje (menos negros + seleccionado notorio) ===== */
.calificar-anexo02 .puntaje-selector{ display:flex; gap:18px; align-items:center; margin-top:12px; }

.calificar-anexo02 .puntaje-option{
  flex:1; text-align:center; padding:12px 14px; border-radius:14px; cursor:pointer;
  background: linear-gradient(180deg, #ed959f, #ed959f);  /* más claro para contraste */
  color:#f5f7fa;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 6px 6px 14px rgba(72, 154, 248, 0.2), -6px -6px 14px rgba(255,255,255,.04);
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.calificar-anexo02 .puntaje-option:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #7d91f4, #7d91f4);
}
.calificar-anexo02 .puntaje-option.selected{
  background: linear-gradient(180deg, #e74268, #e74268);
  border-color:#22d3ee;
  box-shadow:
    inset 8px 8px 16px rgba(0,0,0,.35),
    inset -8px -8px 16px rgba(255,255,255,.02),
    0 0 0 3px rgba(34,211,238,.45);  /* anillo de selección visible */
}

/* ===== Panel lateral (Observaciones / Guardar): blanco con texto oscuro ===== */
.calificar-anexo02 .col-md-4 .card{
  background:#ffffff !important;
  color:#0b1220 !important;
  border:1px solid #e5e7eb !important;
  border-radius:16px !important;
  box-shadow: 8px 8px 22px rgba(0,0,0,.06), -8px -8px 22px rgba(255,255,255,.25);
}
.calificar-anexo02 .col-md-4 .card .card-header{
  background: linear-gradient(180deg,#1d1d1d,#0f0f0f) !important;
  color:#fff !important;
  border:none !important;
  border-top-left-radius:16px !important;
  border-top-right-radius:16px !important;
}
.calificar-anexo02 textarea.form-control,
.calificar-anexo02 input.form-control{
  background:#fff; color:#0b1220; border:1px solid #d1d5db;
}

/* Total (dentro del panel lateral) */
.calificar-anexo02 .total-display{
  font-size:2rem; font-weight:700; text-align:center;
  padding:18px; border-radius:12px;
  background:#f8fafc; color:#0b1220; border:1px solid #e5e7eb;
}

/* Estados de resultado */
.calificar-anexo02 .resultado-apto{ color:#16a34a; }
.calificar-anexo02 .resultado-no-apto{ color:#dc2626; }

/* ===== Botones (contraste y look neo) ===== */
.calificar-anexo02 .btn-success{
  background: linear-gradient(180deg, #1d1d1d, #0f0f0f) !important;
  border:0 !important; color:#fff !important; font-weight:700; border-radius:12px;
  box-shadow: 10px 10px 20px rgba(0,0,0,.25), -10px -10px 20px rgba(255,255,255,.05);
}
.calificar-anexo02 .btn-success:hover{ filter:brightness(1.05); }
.calificar-anexo02 .btn-outline-primary{
  border-color:#0f172a; color:#0f172a;
}
.calificar-anexo02 .btn-outline-primary:hover{
  background:#0f172a; color:#fff; border-color:#0f172a;
}

/* Utilidad sticky */
.sticky-20{ top:20px; }

/* Calificar Anexo 02 – ajustar tamaño y centrado del puntaje/estado */
.calificar-anexo02 .total-display{
  font-size: 2.25rem;          /* antes 2rem */
  text-align: center;
}

.calificar-anexo02 #resultado-estado{
  font-size: 1.25rem !important;  /* sobrescribe el inline 0.8em */
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-top: .25rem;
  display: block;
}

/* Centrar puntaje y estado en el panel de totales */
.calificar-anexo02 .total-display{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
}

.calificar-anexo02 #resultado-estado{
  text-align: center !important;
  width: 100%;
}



/* ===== PRINT – Registro Maestro (v4, top más compacto) ===== */
@media print {

  /* Papel y márgenes mínimos */
  @page { size: A4; margin: 8mm 8mm 10mm 8mm; }
  @page :first { margin-top: 2mm; } /* sube más la página 1 */

  /* Sin márgenes/padding “fantasma” */
  html, body { margin: 0 !important; padding: 0 !important; }

  /* Header presente pero súper compacto */
  .header-estudiante{
    position: static !important;
    margin: 0 0 6px 0 !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }
  .header-estudiante h1,
  .header-estudiante h2,
  .header-estudiante p { margin: 0 !important; }

  /* Sube el primer bloque de contenido */
  .container{ max-width: 100% !important; margin-top: 0 !important; padding-top: 0 !important; }
  .container > *:first-child { margin-top: 0 !important; }
  .container > .row:first-child,
  .container > .card:first-child,
  .container > form:first-child { margin-top: 0 !important; }

  /* Quita adornos y sombras en papel */
  .navbar, .footer, .breadcrumb, .bg-tapestry,
  .btn, .badge, .alert { display: none !important; }

  body, .container, .card, .card-body, .neo,
  .form-section, .responsabilidad-section {
    background: #fff !important;
    color: #000 !important;
    border-color: #ddd !important;
    box-shadow: none !important;
  }

  /* Evitar páginas en blanco / cortes raros */
  .card, .card-body, .neo,
  .form-section, .responsabilidad-section {
    break-inside: auto !important;        /* estándar */
    page-break-inside: auto !important;    /* legacy */
    overflow: visible !important;
  }
  .card-header, h1, h2, h3, h4, h5 { break-after: avoid !important; }
}

/* PRINT – subir un poco más la primera página */
@media print {
  @page :first { margin-top: 0mm; }  /* de 2mm -> 0mm */

  .header-estudiante{
    padding: 2px 0 !important;
    margin: 0 0 2px 0 !important;
  }

  /* tira el contenido ~3mm hacia arriba */
  .container{ margin-top: 0 !important; }
}


/* ====== Charts – tamaños y layout reutilizables ====== */
.chart-left { margin: 0 auto; }
@media (min-width: 992px){
  .chart-left {
    width: 300px;
    height: 300px;
  }
}
/* Asegura que el canvas respete el contenedor */
.chart-left > canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Tarjetas compactas (se ajustan al contenido) */
.card-compact{
  max-width: 640px;   /* ajusta si quieres más/menos ancho total */
  margin-left: 0;     /* pegada a la izquierda */
}
@media (max-width: 576px){
  .card-compact{ max-width: 100%; } /* en móvil ocupa todo */
}

/* El lienzo del pastel */
.chart-left{
  width: 420px;       /* ya lo tenías; ajusta a 360–480px si deseas */
  min-height: 260px;
}




/* ========= PRINT: no cortar cards y controlar saltos ========= */
@media print {
 

  /* fuerza empezar en página nueva cuando lo necesites */
  .print-break-before {
    break-before: page;
    page-break-before: always;
  }

  /* altura suficiente para que entren las 10 barras en una sola página */
  #chartEmpresasAgro,
  #chartEmpresasEno {
    height: 260px !important;  /* si aún se corta, súbelo a 600px */
  }

  /* evitar que el canvas reduzca su ancho */
  canvas {
    max-width: 100% !important;
    display: block;
  }
}



@media print {
  /* Empuja un poquito el siguiente bloque en impresión */
  .print-bump-top { margin-top: 20mm !important; }

  /* (opcional) Donut un poco más compacto en impresión */
  .chart-left { width: 260px; height: 260px !important; }
}


/* Info registro estudiante */
.info-registro {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.info-registro h5,
.info-registro p,
.info-registro small {
  color: #1a1a1a !important;
}