/* =========================================================
   Jaguares Verdes - hoja de estilos única
   ========================================================= */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f1f4f1;
    color: #222;
}

/* ---------- Cabecera y menú ---------- */
header {
    background: #0b5d1e;
    color: white;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    text-align: center;
}
header h1 { margin: 0; font-size: 28px; }
header p  { margin: 6px 0 0 0; opacity: .9; }
.temporada-sistema {
    display: inline-block;
    margin-top: 9px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .32);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
}

.logo-escuela {
    height: 100px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    background: white;
    padding: 5px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}

.menu {
    background: #084816;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
.menu a,
.menu button.salir {
    color: white;
    text-decoration: none;
    padding: 9px 13px;
    display: inline-block;
    font-weight: bold;
    border-radius: 6px;
    font-size: 15px;
    white-space: nowrap;
}
.menu a:hover { background: #0b5d1e; }
.menu a.activo { background: #27ae60; }
.menu a.salir, .menu button.salir { background: #c0392b; border: 0; cursor: pointer; font-family: inherit; }
.menu .form-salir { margin: 0; padding: 0; display: inline-flex; }

@media (max-width: 700px) {
    .menu a, .menu button.salir { font-size: 14px; padding: 8px 10px; }
    header h1 { font-size: 22px; }
    .logo-escuela { height: 72px; }
}

/* ---------- Contenedor ---------- */
.contenedor { max-width: 1200px; margin: auto; padding: 25px 15px; }
.contenedor.dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.contenedor.lista-asistencia {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
}
@media (max-width: 850px) {
    .contenedor.dos-columnas,
    .contenedor.lista-asistencia { grid-template-columns: 1fr; }
}

/* ---------- Tarjetas ---------- */
.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}
.tarjeta {
    background: white;
    padding: 22px;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}
.tarjeta h2, .tarjeta h3 { color: #0b5d1e; margin-top: 0; }
.numero { font-size: 34px; font-weight: bold; color: #0b5d1e; }
.nota { margin: 5px 0 0; color: #666; font-size: 13px; }

.card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
    margin-bottom: 20px;
}
.card h3 { color: #0b5d1e; margin-top: 0; }

.info {
    background: #e8f0e9;
    border-left: 5px solid #0b5d1e;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* ---------- Encabezados de sección ---------- */
.encabezado-seccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.encabezado-seccion h2 { margin: 0; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    padding: 10px 16px;
    border: none;
    border-radius: 7px;
    background: #0b5d1e;
    color: white;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
}
.btn:hover { opacity: .92; }
.btn-agregar { background: #27ae60; padding: 12px 20px; border-radius: 8px; }
.btn-recibo {
    background: #0b5d1e;
    color: white;
    padding: 7px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    display: inline-block;
}
.btn-bloque { width: 100%; padding: 11px; margin-top: 10px; }

/* Los colores van al final para que ganen sobre .btn-agregar y .btn-recibo */
.btn-verde    { background: #27ae60; }
.btn-naranja  { background: #f39c12; color: #222; }
.btn-rojo     { background: #c0392b; }
.btn-gris     { background: #777; }
.btn-morado   { background: #8e44ad; }
.btn-azul     { background: #2980b9; }
.btn-whatsapp { background: #25D366; }

/* ---------- Buscador ---------- */
.buscar { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.buscar input  { flex: 1; min-width: 200px; padding: 12px; border: 1px solid #ccc; border-radius: 7px; }
.buscar select { padding: 12px; border: 1px solid #ccc; border-radius: 7px; background: white; }

/* ---------- Tablas ---------- */
.tabla { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
    background: #0b5d1e;
    color: white;
    padding: 11px;
    text-align: left;
    font-size: 14px;
}
td { padding: 10px; border-bottom: 1px solid #ddd; font-size: 14px; }
.tabla-ancha table { min-width: 950px; }
.vacio { text-align: center; color: #777; }

.nombre, .link-jugador {
    color: #0b5d1e;
    font-weight: bold;
    text-decoration: none;
}
.nombre:hover, .link-jugador:hover { text-decoration: underline; }

.etiqueta {
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    background: #27ae60;
}
.etiqueta.admin { background: #0b5d1e; }

/* ---------- Acordeón de categorías ---------- */
.acordeon-categoria {
    background: white;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.cabecera-categoria {
    padding: 15px 20px;
    font-size: 17px;
    font-weight: bold;
    color: #0b5d1e;
    background: #e8f0e9;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    user-select: none;
}
.cabecera-categoria::-webkit-details-marker { display: none; }
.cabecera-categoria:hover { background: #dbe8dd; }
.badge-cat {
    background: #0b5d1e;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: normal;
}
.contenido-cat { padding: 15px 20px; border-top: 1px solid #eee; background: #fafafa; }

/* ---------- Formularios ---------- */
.formulario {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}
.campo { margin-bottom: 15px; }
.campo label { display: block; font-weight: bold; margin-bottom: 5px; color: #0b5d1e; }
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}
.campo small { color: #666; }
.botones { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.botones .btn { flex: 1; min-width: 140px; padding: 11px 16px; }
.aviso {
    background: #e8f0e9;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    color: #0b5d1e;
}
.msg-exito {
    background: #d4edda; color: #155724;
    padding: 10px; border-radius: 6px; margin-bottom: 10px; font-size: 14px;
}
.msg-error {
    background: #f8d7da; color: #721c24;
    padding: 10px; border-radius: 6px; margin-bottom: 10px; font-size: 14px;
}

/* ---------- Ficha de jugador ---------- */
.ficha {
    background: white;
    padding: 28px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    margin-bottom: 20px;
}
.ficha h2 { margin-top: 0; color: #0b5d1e; }
.dato { margin-bottom: 14px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.dato label { font-weight: bold; color: #0b5d1e; display: block; }
.dato span  { font-size: 17px; color: #333; }
.acciones { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.acciones form { margin: 0; }

/* ---------- Recibos ---------- */
.recibo {
    width: 100%;
    margin: 0 auto;
    background: white;
    padding: 28px;
    border-top: 7px solid #0b5d1e;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .12);
}
.recibo .cabecera {
    text-align: center;
    border-bottom: 2px dashed #ccc;
    padding-bottom: 16px;
    margin-bottom: 20px;
}
.recibo .cabecera h2 { color: #0b5d1e; margin: 0; }
.numero-recibo { font-size: 23px; font-weight: bold; margin-top: 10px; }
.datos div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 0;
    border-bottom: 1px solid #eee;
}
.resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.caja { padding: 15px; border-radius: 9px; background: #f1f4f1; text-align: center; }
.caja strong { display: block; color: #0b5d1e; margin-bottom: 6px; }
.caja .valor  { font-size: 21px; font-weight: bold; }
.caja .estado { font-size: 21px; font-weight: bold; color: #0b5d1e; }
.monto-total {
    margin: 22px 0;
    padding: 18px;
    border-radius: 8px;
    background: #e8f0e9;
    color: #0b5d1e;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
.excedente { color: #b06b00; font-weight: bold; }
.pie-recibo { text-align: center; color: #666; margin-top: 20px; }

/* ---------- Login ---------- */
body.pantalla-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}
.caja-login {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    width: 100%;
    max-width: 360px;
    text-align: center;
}
.caja-login img { height: 90px; width: auto; margin-bottom: 15px; }
.caja-login h2  { color: #0b5d1e; margin: 0 0 20px 0; }
.caja-login input {
    width: 100%;
    padding: 11px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.caja-login button {
    width: 100%;
    padding: 11px;
    background: #0b5d1e;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    font-size: 15px;
}
.caja-login .error { color: #c0392b; font-size: 14px; margin-bottom: 10px; }

/* =========================================================
   Rejillas de paneles
   ========================================================= */
.rejilla-graficas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.rejilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.contenedor h2 { color: #0b5d1e; margin: 26px 0 14px; }
.contenedor > h2:first-child { margin-top: 0; }

/* =========================================================
   Gráficas
   ========================================================= */
.grafica {
    width: 100%;
    height: auto;
    max-height: 340px;
    display: block;
    overflow: visible;
}
.grafica.radar { max-height: 290px; }

.grafica-vacia {
    background: #fafbfa;
    border: 1px dashed #cfd8cf;
    border-radius: 10px;
    padding: 26px 16px;
    text-align: center;
    color: #7a857a;
    font-size: 14px;
}

.dona-envoltura {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.dona { width: 210px; min-width: 180px; flex: 0 0 auto; height: auto; }

.leyenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; }
.leyenda li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f2f0;
    font-size: 14px;
}
.leyenda li:last-child { border-bottom: none; }
.leyenda .punto {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    flex: 0 0 auto;
}
.leyenda .leyenda-texto { flex: 1; color: #444; }
.leyenda strong { color: #0b5d1e; white-space: nowrap; }
.leyenda em { color: #999; font-style: normal; font-size: 12px; min-width: 46px; text-align: right; }

/* Barra de progreso */
.progreso {
    background: #e9eee9;
    border-radius: 20px;
    height: 14px;
    overflow: hidden;
    margin: 6px 0;
}
.progreso-relleno {
    height: 100%;
    border-radius: 20px;
    transition: width .4s ease;
}

/* =========================================================
   Etiquetas de estado
   ========================================================= */
.pastilla {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    white-space: nowrap;
    background: #7f8c8d;
}
.pastilla.pagado    { background: #27ae60; }
.pastilla.abonado   { background: #f39c12; color: #222; }
.pastilla.pendiente { background: #c0392b; }
.pastilla.becado    { background: #2980b9; }
.pastilla.sin-historial { background: #7f8c8d; }

/* Opciones de cobro en la ficha del jugador */
.opciones-cobro { display: flex; gap: 10px; flex-wrap: wrap; }
.opcion-cobro {
    flex: 1;
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    background: #fafbfa;
    border: 2px solid #eef0ee;
    border-radius: 10px;
    padding: 11px 13px;
    cursor: pointer;
    margin: 0;
}
.opcion-cobro:hover { border-color: #cfe0d2; }
.opcion-cobro:has(input:checked) { border-color: #27ae60; background: #f2f9f4; }
.opcion-cobro input { width: auto; margin: 0; }

.estrellas { color: #f39c12; letter-spacing: 1px; }

/* =========================================================
   Formularios ampliados
   ========================================================= */
.fila-campos {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.fila-campos .campo { flex: 1; min-width: 140px; }

.campo textarea { resize: vertical; min-height: 70px; }
.campo input[type="file"] { padding: 9px; background: #fafbfa; }
.campo input[type="checkbox"] { width: auto; }

.campo-nota { background: #fafbfa; border: 1px solid #eef0ee; border-radius: 10px; padding: 12px; }
.nota-control { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nota-control input[type="range"] { flex: 1; min-width: 180px; accent-color: #0b5d1e; padding: 0; }
.nota-valor { min-width: 118px; text-align: right; color: #f39c12; letter-spacing: 2px; font-size: 17px; }
.nota-valor strong { color: #0b5d1e; letter-spacing: 0; margin-left: 6px; }

/* =========================================================
   Tarjetas de acción (centro de datos)
   ========================================================= */
.tarjeta-accion { display: flex; flex-direction: column; }
.tarjeta-accion h3 { margin-bottom: 6px; }
.tarjeta-accion p { margin: 0 0 10px; font-size: 14px; color: #555; }
.tarjeta-accion .nota { margin-top: auto; margin-bottom: 12px; }
.tarjeta-accion.destacada { border: 2px solid #27ae60; }
.icono-grande { font-size: 34px; line-height: 1; margin-bottom: 8px; }

.lista-ayuda { margin: 10px 0 0; padding-left: 20px; color: #444; font-size: 14px; }
.lista-ayuda li { margin-bottom: 8px; }

/* =========================================================
   Pantalla para compartir el recibo
   ========================================================= */
.compartir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 860px) {
    .compartir { grid-template-columns: 1fr; }
}
.compartir-vista {
    background: white;
    padding: 14px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    position: sticky;
    top: 16px;
}
.compartir-vista img { width: 100%; height: auto; display: block; border-radius: 8px; }
.compartir-acciones .btn-bloque { margin-top: 10px; }

/* ---------- Impresión ---------- */
@media print {
    header, .menu, .acciones, .no-imprimir { display: none !important; }
    body { background: white; }
    .contenedor { padding: 0; max-width: none !important; }
    .recibo { box-shadow: none; border-radius: 0; padding: 0; }
}

/* =========================================================
   MÓDULO DE INSCRIPCIONES PÚBLICAS
   ========================================================= */
.inscripcion-publica { padding-bottom: 42px; }
.inscripcion-intro {
    background: linear-gradient(135deg, #083f1a 0%, #0b5d1e 58%, #16713a 100%);
    color: #fff;
    border-radius: 18px;
    padding: 28px 30px;
    margin: 18px 0;
    box-shadow: 0 12px 32px rgba(6, 56, 24, .18);
}
.inscripcion-intro h2 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 40px); color: #fff; }
.inscripcion-intro p { max-width: 720px; margin: 0; line-height: 1.55; opacity: .95; }
.inscripcion-etiqueta { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: #d8ef69; }
.inscripcion-pasos { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.inscripcion-pasos span { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:7px 12px; font-size:13px; }
.inscripcion-form { background: transparent; box-shadow:none; padding:0; }
.inscripcion-bloque {
    background:#fff;
    border:1px solid #dce7df;
    border-radius:15px;
    padding:22px 24px;
    margin:14px 0;
    box-shadow:0 5px 18px rgba(29, 74, 45, .06);
}
.inscripcion-bloque h3 { color:#0b5d1e; margin:0 0 17px; padding-bottom:10px; border-bottom:1px solid #edf2ee; }
.inscripcion-bloque input[readonly] { background:#f3f6f4; color:#0b5d1e; font-weight:700; }
.campo-trampa { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; left:-10000px!important; }
.check-inscripcion { display:flex; align-items:flex-start; gap:11px; padding:11px 0; line-height:1.45; cursor:pointer; }
.check-inscripcion input { width:18px; height:18px; flex:0 0 auto; margin-top:2px; }
.inscripcion-enviar { margin-top:16px; }
.inscripcion-exito { max-width:670px; margin:42px auto; text-align:center; background:#fff; border-radius:18px; padding:38px 30px; box-shadow:0 10px 34px rgba(0,0,0,.09); border-top:6px solid #0b5d1e; }
.inscripcion-check { width:70px; height:70px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:#e8f6ed; color:#0b5d1e; font-weight:900; font-size:38px; }
.codigo-solicitud { background:#f0f6f2; border-radius:10px; padding:12px 16px; display:inline-block; }
.enlace-publico-card { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.enlace-publico-card code { background:#eef4f0; padding:8px 10px; border-radius:8px; color:#0b5d1e; font-weight:700; }
.enlace-publico-card small { width:100%; }
.tabs-inscripciones { display:flex; gap:8px; flex-wrap:wrap; margin:15px 0; }
.tab-inscripcion { display:inline-block; padding:9px 14px; border-radius:999px; background:#edf2ee; color:#2d4133; text-decoration:none; font-weight:700; }
.tab-inscripcion.activo { background:#0b5d1e; color:#fff; }
.estado-inscripcion { display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; white-space:nowrap; }
.estado-pendiente { background:#fff1c8; color:#8a5b00; }
.estado-aprobada { background:#dcf3e4; color:#086226; }
.estado-rechazada { background:#fde1dd; color:#a42b20; }
.grid-revision-inscripcion { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.datos-solicitud { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
.datos-solicitud div { border-bottom:1px solid #edf1ee; padding:7px 0; min-width:0; }
.datos-solicitud dt { font-size:12px; color:#66736a; margin-bottom:3px; }
.datos-solicitud dd { margin:0; font-weight:700; overflow-wrap:anywhere; }
.caja-texto-solicitud { background:#f6f8f6; border:1px solid #e1e8e3; border-radius:9px; padding:12px; min-height:54px; white-space:normal; line-height:1.5; }
.bloque-aprobacion-inscripcion { margin-top:18px; border-top:4px solid #0b5d1e; }
.tabla-responsive { overflow-x:auto; }

@media (max-width: 760px) {
    .inscripcion-intro { padding:22px 18px; border-radius:13px; }
    .inscripcion-bloque { padding:18px 15px; }
    .grid-revision-inscripcion { grid-template-columns:1fr; }
    .datos-solicitud { grid-template-columns:1fr; }
}


/* =========================================================
   OPTIMIZACIÓN MÓVIL - FASE 1
   Solo presentación: no altera lógica, rutas ni datos.
   ========================================================= */
.menu-movil-boton {
    display: none;
    width: 100%;
    min-height: 46px;
    border: 0;
    background: #084816;
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    padding: 10px 14px;
    text-align: left;
}

.tabla,
.tabla-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media (max-width: 760px) {
    body { font-size: 15px; }

    header {
        padding: 12px 12px;
        gap: 11px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        text-align: left;
    }
    header > div { min-width: 0; }
    header h1 {
        font-size: 20px;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }
    header p {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.25;
    }
    .temporada-sistema {
        margin-top: 6px;
        padding: 4px 8px;
        font-size: 11px;
    }
    .logo-escuela {
        width: auto;
        height: 62px;
        max-width: 78px;
        flex: 0 0 auto;
        padding: 3px;
        border-radius: 9px;
    }

    .menu-movil-boton { display: block; }
    .menu.menu-principal {
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        align-items: stretch;
    }
    .menu.menu-principal.abierto { display: grid; }
    .menu.menu-principal a,
    .menu.menu-principal button.salir {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 44px;
        padding: 9px 10px;
        white-space: normal;
        line-height: 1.15;
        text-align: left;
        font-size: 13px;
    }
    .menu.menu-principal .form-salir {
        grid-column: 1 / -1;
        width: 100%;
    }
    .menu.menu-principal .form-salir button { justify-content: center; }

    .contenedor {
        padding: 16px 10px 28px;
        width: 100%;
    }
    .encabezado-seccion {
        align-items: stretch;
        margin-bottom: 14px;
    }
    .encabezado-seccion h2 {
        width: 100%;
        font-size: 21px;
        line-height: 1.2;
    }

    .btn,
    .btn-recibo,
    button,
    input[type="submit"] {
        min-height: 44px;
        touch-action: manipulation;
    }

    .acciones-panel,
    .acciones-ficha {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }
    .acciones-panel .btn,
    .acciones-ficha .btn {
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 8px;
        line-height: 1.2;
        white-space: normal;
        font-size: 13px;
    }

    .tarjetas {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }
    .tarjeta {
        padding: 17px;
        border-radius: 12px;
    }
    .tarjeta h2,
    .tarjeta h3 { font-size: 17px; }
    .numero { font-size: 29px; line-height: 1.1; }
    .card {
        padding: 16px;
        margin-bottom: 14px;
    }

    .ficha {
        padding: 18px 15px;
        border-radius: 12px;
    }
    .dato span { font-size: 16px; overflow-wrap: anywhere; }

    .formulario { padding: 17px 14px; }
    .fila-campos { display: block; }
    .fila-campos .campo { min-width: 0; }
    .campo input,
    .campo select,
    .campo textarea,
    .buscar input,
    .buscar select {
        font-size: 16px;
        min-height: 44px;
    }
    .buscar input,
    .buscar select,
    .buscar .btn {
        width: 100%;
        min-width: 0;
    }

    .rejilla-graficas,
    .rejilla-tarjetas {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .dona-envoltura { justify-content: center; }
    .dona { width: min(210px, 75vw); min-width: 0; }
    .leyenda { min-width: 100%; }

    .tabla,
    .tabla-responsive,
    .tabla-ancha {
        max-width: 100%;
        overflow-x: auto;
        border-radius: 8px;
    }
    th, td { padding: 9px 8px; }

    .recibo { padding: 18px 14px; }
    .monto-total { font-size: 25px; }
    .datos div { align-items: flex-start; }

    .nota-control input[type="range"] { min-width: 100%; }
    .nota-valor { min-width: 100%; text-align: left; }
}

@media (max-width: 380px) {
    header h1 { font-size: 18px; }
    .logo-escuela { height: 56px; max-width: 70px; }
    .acciones-panel,
    .acciones-ficha { grid-template-columns: 1fr; }
    .menu.menu-principal { grid-template-columns: 1fr; }
    .menu.menu-principal .form-salir { grid-column: 1; }
}