/* ============================================================================
   ESTÁNDAR UI — Hoja de estilos ÚNICA para las páginas de gestión de la app.
   Cárgala en Site.master y usa estas clases en TODAS las pantallas de gestión
   (admin, escuela, tienda, etc.) para que toda la aplicación quede homogénea.

   Regla de oro:
   - Listado en TARJETA (.ea-card) con cabecera (.ea-list-head): título + botón
     "+ Nuevo" a la derecha.
   - Barra de filtros (.ea-filters): buscador + selects + Buscar + Limpiar +
     Exportar a Excel.
   - Grilla compacta (.ea-table): cabecera en mayúsculas gris, filas con
     separador fino, hover suave. NADA de table-bordered gruesa.
   - Acciones de fila SIEMPRE con BOTONES (.ea-actions > .btn.btn-sm ...),
     NUNCA enlaces de texto.
   - Alta/edición en MODAL de Bootstrap reutilizable.
   - Colores SIEMPRE de marca: var(--marca-primario) / clases *-primary
     (ya tematizadas en Site.master). Nunca azul/verde hardcodeado.
   ========================================================================== */

/* ---- Contenedor y tarjetas -------------------------------------------------*/
.ea-container { background:#f8f9fa; min-height:calc(100vh - 100px); padding:24px 0; }
.ea-card { background:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.08); padding:20px 24px; margin-bottom:20px; }
.ea-card h1 { font-size:22px; font-weight:600; color:#212529; margin:0 0 4px 0; }
.ea-card h2 { font-size:16px; font-weight:600; color:#212529; margin:0; }
.ea-card .sub { color:#6c757d; font-size:14px; }
.ea-list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; flex-wrap:wrap; }

/* ---- Tarjetas de KPI / estadística ----------------------------------------*/
.ea-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:20px; }
.ea-stat { background:#fff; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.08); padding:18px 20px; border-left:4px solid var(--marca-primario, #1e88e5); }
.ea-stat h6 { color:#6c757d; font-size:12px; font-weight:600; text-transform:uppercase; margin:0 0 6px 0; letter-spacing:.4px; }
.ea-stat .val { font-size:26px; font-weight:700; color:#212529; }
.ea-stat .sub { font-size:13px; color:#6c757d; margin-top:2px; }
.ea-stat.ok { border-left-color:#28a745; }
.ea-stat.info { border-left-color:#17a2b8; }
.ea-stat.warn { border-left-color:#ffc107; }
.ea-stat.danger { border-left-color:#dc3545; }

/* ---- Formulario en grid (dentro de modales) -------------------------------*/
.ea-form-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:8px; }
.ea-form-grid .fld { display:flex; flex-direction:column; gap:4px; }
.ea-form-grid .fld.wide { grid-column:span 2; }
.ea-form-grid .fld.full { grid-column:1 / -1; }
.ea-form-grid .fld span { font-size:12px; color:#6c757d; }
.ea-form-grid input[type=text], .ea-form-grid input[type=email], .ea-form-grid input[type=password],
.ea-form-grid input[type=number], .ea-form-grid input[type=date], .ea-form-grid select, .ea-form-grid textarea {
    padding:7px 10px; border:1px solid #ced4da; border-radius:6px; font-size:14px; width:100%; box-sizing:border-box; }
.ea-form-grid .fld.chk { flex-direction:row; align-items:center; gap:8px; }
.ea-form-grid .fld.chk span { font-size:14px; color:#495057; }

/* ---- Barra de filtros del listado -----------------------------------------*/
.ea-filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 12px 0; }
.ea-filters .ea-search { padding:7px 10px; border:1px solid #ced4da; border-radius:6px; font-size:14px; min-width:260px; flex:1 1 260px; max-width:380px; }
.ea-filters .ea-search-sel { padding:7px 10px; border:1px solid #ced4da; border-radius:6px; font-size:14px; }
.ea-filters .ea-clear { color:#6c757d; text-decoration:none; font-size:13px; }
.ea-filters .ea-clear:hover { text-decoration:underline; }
.ea-filters .push-right { margin-left:auto; }

/* ---- Grilla estándar (compacta, sin bordes gruesos) -----------------------*/
.ea-table { width:100%; border-collapse:collapse; margin-top:12px; }
.ea-table th, .ea-table td { text-align:left; padding:8px 10px; border-bottom:1px solid #eef0f2; font-size:14px; vertical-align:middle; }
.ea-table th { color:#6c757d; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.3px; }
.ea-table tbody tr:hover { background:#f8f9fb; }
.ea-table-wrap { overflow-x:auto; }

/* ---- Acciones de fila: SIEMPRE BOTONES (nunca enlaces de texto) ------------*/
.ea-actions { white-space:nowrap; }
.ea-actions .btn { margin-right:6px; }
.ea-actions .btn:last-child { margin-right:0; }
.ea-table .btn-sm, .ea-actions .btn-sm { padding:.22rem .6rem; font-size:.8rem; line-height:1.35; border-radius:5px; }
.ea-muted-self { color:#adb5bd; font-size:13px; }

/* ---- Badges de estado / etiquetas -----------------------------------------*/
.ea-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; font-weight:600; }
.ea-badge-on { background:#e8f5e9; color:#1b5e20; }
.ea-badge-off { background:#fdecea; color:#b71c1c; }
.ea-rol { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; background:#eef2f7; color:#37475a; }

/* ---- Estado vacío / mensajes ----------------------------------------------*/
.ea-empty { color:#6c757d; padding:16px; font-style:italic; }
.ea-msg { padding:10px 14px; border-radius:6px; margin-bottom:16px; font-size:14px; }
.ea-msg-ok { background:#e8f5e9; color:#1b5e20; border:1px solid #c8e6c9; }
.ea-msg-err { background:#fdecea; color:#b71c1c; border:1px solid #f5c6cb; }
.ea-msg-info { background:#e7f1fb; color:#0c5460; border:1px solid #bcdff5; }
.ea-msg-warn { background:#fff8e1; color:#856404; border:1px solid #ffe08a; }

/* ---- Paginador en servidor ------------------------------------------------*/
.ea-pager { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:14px; }
.ea-pager a, .ea-pager span.cur, .ea-pager span.dots { display:inline-block; min-width:32px; text-align:center; padding:6px 10px; border:1px solid #dee2e6; border-radius:6px; font-size:13px; text-decoration:none; color:var(--marca-primario, #1e88e5); }
.ea-pager a:hover { background:#f1f3f5; }
.ea-pager span.cur { background:var(--marca-primario, #1e88e5); border-color:var(--marca-primario, #1e88e5); color:#fff; }
.ea-pager span.dots { border:none; color:#adb5bd; min-width:auto; padding:6px 2px; }
.ea-pager .info { border:none; color:#6c757d; min-width:auto; padding:6px 8px; }

/* ---- GridView de WebForms reusando la grilla estándar ---------------------*/
/* Para páginas que aún usan <asp:GridView CssClass="ea-table">. El paginador
   nativo del GridView queda discreto y centrado. */
.ea-table > tbody > tr > td, .ea-table > tbody > tr > th { border-bottom:1px solid #eef0f2; }
.ea-table tr.ea-gv-pager td, table.ea-table tr td table td { padding:4px 8px; }
.ea-table tr.ea-gv-pager a, .ea-table tr.ea-gv-pager span { color:var(--marca-primario, #1e88e5); }

@media (max-width: 700px) {
    .ea-form-grid { grid-template-columns:1fr 1fr; }
    .ea-form-grid .fld.wide { grid-column:span 2; }
}