/*
 * estilo_piazza.css — estética común del sistema de autogestión
 * (misma línea visual que "Mis Notas" / inicio del alumno).
 * Se carga DESPUÉS de theme.css y sólo cambia la apariencia, no el funcionamiento.
 */
:root {
    --pz-rojo: #c41230;
    --pz-rojo-claro: #fde8eb;
    --pz-verde: #1e7e34;
    --pz-verde-claro: #e3f4e8;
    --pz-gris: #666;
    --pz-fondo: #f5f5f5;
    --pz-borde: #eee;
    --pz-sombra: 0 1px 3px rgba(0, 0, 0, .08);
}

body, .page-content--bgf7 { background: var(--pz-fondo); }

/* ---------- Menú superior: marca la sección actual ---------- */
.header-desktop3 .header__navbar ul li a { transition: background .15s; }
.header-desktop3 .header__navbar ul li a.pz-activo,
.header-desktop3 .header__navbar ul li a:hover { background: rgba(255, 255, 255, .14); }
.header-desktop3 .header__navbar ul li a.pz-activo { box-shadow: inset 0 -3px 0 #fff; }

/* ---------- Títulos ---------- */
h1.page-header {
    color: #333 !important;
    font-size: 1.6rem;
    font-weight: 600;
    border-bottom: #C9CDD7 solid thin;
    padding-bottom: 6px;
    margin-bottom: 18px !important;
}

/* ---------- Tablas ---------- */
.table-responsive-data2 {
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--pz-sombra);
    overflow-x: auto;
}
.table-data2.table { margin-bottom: 0; background: #fff; }
.table-data2.table thead th,
.table-data2 thead tr th {
    background: var(--pz-rojo) !important;
    color: #fff !important;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 0 !important;
    vertical-align: middle;
}
.table-data2.table thead tr th:first-child { border-top-left-radius: 6px; }
.table-data2.table thead tr th:last-child  { border-top-right-radius: 6px; }
.table-data2.table tbody tr,
.table-data2.table tbody tr.tr-shadow {
    background: #fff;
    box-shadow: none !important;
    border-bottom: 1px solid #f1f1f1;
    transition: background .12s;
}
.table-data2.table tbody tr.tr-shadow:hover { background: #fff5f6; }
.table-data2.table tbody td { color: #333; font-size: .9rem; vertical-align: middle; }
.table-data2.table tr.spacer { height: 0 !important; }
.table-data2.table tr.deshabilitado td { opacity: .55; }

/* Botones redondos de acción (editar / eliminar / pagos / recibo) */
.table-data-feature .item {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f1f1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    transition: background .15s, color .15s, transform .1s;
}
.table-data-feature .item i { color: #555; font-size: 16px; }
.table-data-feature .item:hover { background: var(--pz-rojo); transform: translateY(-1px); }
.table-data-feature .item:hover i { color: #fff; }
.table-data-feature .item:has(.zmdi-money):hover,
.table-data-feature .item:has(.zmdi-collection-text):hover { background: var(--pz-verde); }

/* ---------- Botones ---------- */
.btn { border-radius: 6px; font-weight: 600; }
.btn-secondary {
    background: #333;
    border-color: #333;
}
.btn-secondary:hover, .btn-secondary:focus { background: var(--pz-rojo); border-color: var(--pz-rojo); }
.btn:has(.fa-plus), .btn-secondary:has(.fa-plus) {
    background: var(--pz-rojo);
    border-color: var(--pz-rojo);
    color: #fff;
}
.btn:has(.fa-plus):hover { background: #a10e27; border-color: #a10e27; }
.btn-success { background: var(--pz-verde); border-color: var(--pz-verde); }

/* ---------- Formularios y filtros ---------- */
.form-control, select.form-control {
    border-radius: 6px;
    border-color: #ddd;
}
.form-control:focus {
    border-color: var(--pz-rojo);
    box-shadow: 0 0 0 .15rem rgba(196, 18, 48, .15);
}

/* ---------- Paginación ---------- */
.paging a, .paging span { border-radius: 6px; }
.paging a.active, .paging .active span { background: var(--pz-rojo) !important; color: #fff !important; }

/* ---------- Páginas incluidas dentro del panel: evita el doble encabezado ---------- */
.page-content--bgf7 .page-content--bgf7 .header-desktop3,
.page-content--bgf7 .page-content--bgf7 .header-mobile,
section .header-desktop3,
section .header-mobile { display: none !important; }

/* ---------- Tablero de inicio (personal) ---------- */
.pz-hola h2 { font-size: 1.6rem; margin: 0; }
.pz-hola p { color: #777; margin: 2px 0 18px; }
.pz-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 26px; }
.pz-kpi { background: #fff; border-radius: 6px; box-shadow: var(--pz-sombra); padding: 16px 18px; border-left: 5px solid var(--pz-rojo); }
.pz-kpi.verde { border-left-color: var(--pz-verde); }
.pz-kpi.gris { border-left-color: #999; }
.pz-kpi .lbl { font-size: .8rem; color: var(--pz-gris); text-transform: uppercase; letter-spacing: .04em; }
.pz-kpi .num { font-size: 1.8rem; font-weight: 600; line-height: 1.15; color: #222; }
.pz-kpi .sub { font-size: .82rem; color: #888; }
.pz-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 28px; }
.pz-accesos a {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border-radius: 6px; box-shadow: var(--pz-sombra);
    padding: 16px; color: #333; font-weight: 600; text-decoration: none;
    transition: transform .1s, box-shadow .15s;
}
.pz-accesos a:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .1); color: var(--pz-rojo); }
.pz-accesos a .ico {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pz-rojo-claro); color: var(--pz-rojo); font-size: 1.2rem;
}
.pz-accesos a.verde .ico { background: var(--pz-verde-claro); color: var(--pz-verde); }
.pz-seccion { border-bottom: #C9CDD7 solid thin; margin-bottom: 14px; padding-bottom: 6px; }
.pz-seccion h3 { font-size: 1.15rem; margin: 0; }
.pz-tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: var(--pz-sombra); }
.pz-tabla th { background: var(--pz-rojo); color: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; text-align: left; }
.pz-tabla td { padding: 10px 14px; border-bottom: 1px solid #f1f1f1; font-size: .9rem; }
.pz-tabla tr:last-child td { border-bottom: 0; }
.pz-tabla .der { text-align: right; white-space: nowrap; }
.pz-badge { display: inline-block; font-size: .75rem; font-weight: 600; border-radius: 12px; padding: 2px 9px; background: #eee; color: #555; }
.pz-badge.verde { background: var(--pz-verde-claro); color: var(--pz-verde); }
.pz-vacio { background: #fff; border-radius: 6px; box-shadow: var(--pz-sombra); padding: 22px; text-align: center; color: #777; }
@media (max-width: 576px) {
    .pz-tabla .ocultar-movil { display: none; }
    .pz-kpi .num { font-size: 1.5rem; }
}

/* ---------- Logo (imágenes en alta resolución, se muestran a este tamaño) ---------- */
.header-desktop3 .header__logo img { height: 100px; width: auto; }
.header-mobile .header-mobile-inner .logo img { height: 45px; width: auto; }
.login-logo img { height: 118px; width: auto; max-width: 100%; }

/* ==========================================================================
   ESTETICA GENERAL 2026-10-05
   - Encabezados de tabla en azul oscuro (el rojo queda para el menu y los avisos)
   - Contenido de las paginas viejas dentro de una tarjeta blanca
   - Titulos de pagina uniformes y boton principal en azul oscuro
   Para volver atras: borrar este bloque (hay copia del archivo original).
   ========================================================================== */
:root { --pz-azul: #1f3a68; --pz-azul-borde: #2c4a7c; --pz-azul-claro: #f3f6fb; }

/* Encabezados de tabla (todas las paginas; no toca la fila blanca con el nombre del curso) */
table thead tr:not(.cab-curso):not(#_pz) th {
    background: var(--pz-azul) !important;
    color: #fff !important;
    border-color: var(--pz-azul-borde) !important;
}

/* Fila de tabla al pasar el mouse: celeste suave en vez de rosado */
.table-data2.table tbody tr:hover,
.table-data2.table tbody tr.tr-shadow:hover { background: var(--pz-azul-claro) !important; }

/* Titulos de pagina */
h1.page-header {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #3a3a3a !important;
    border-bottom: none !important;
    margin-bottom: 14px !important;
}

/* Paginas viejas: el contenido va en una tarjeta blanca, como la Planilla, Morosos y Cierre de caja */
.container-fluid:has(h1.page-header):not(:has(.container-fluid h1.page-header)) {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    padding: 22px 26px;
    margin-top: 16px;
}

/* Boton principal ("+ Agregar ...") en azul oscuro */
.btn-secondary.btn-block:not(#_pz) {
    background: var(--pz-azul) !important;
    border-color: var(--pz-azul) !important;
    color: #fff !important;
}
.btn-secondary.btn-block:not(#_pz):hover { background: #16294a !important; border-color: #16294a !important; }

@media print {
    .container-fluid:has(h1.page-header) { box-shadow: none; padding: 0; margin: 0; }
}

/* Inscriptos: botones de operacion (2026-10-05) - $ verde, tacho rojo y separado */
.table-data-feature .item[onclick*="pagos("] { background: #e3f4e8; }
.table-data-feature .item[onclick*="pagos("] i { color: #1e7e34; }
.table-data-feature .item[onclick*="pagos("]:hover { background: #1e7e34; }
.table-data-feature .item[onclick*="eliminar("] { background: #fde8eb; margin-left: 14px; }
.table-data-feature .item[onclick*="eliminar("] i { color: #c41230; }
.table-data-feature .item[onclick*="eliminar("]:hover { background: #c41230; }
.table-data-feature .item[onclick*="pagos("]:hover i, .table-data-feature .item[onclick*="eliminar("]:hover i { color: #fff; }

/* Pagos: boton "Recibo" con texto (2026-10-05) */
.table-data-feature .item.recibo { width: auto !important; height: 30px; padding: 0 12px !important; border-radius: 16px !important; display: inline-flex !important; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #1f3a68 !important; background: #f3f6fb; white-space: nowrap; text-decoration: none; }
.table-data-feature .item.recibo i { color: #1f3a68; margin: 0 !important; position: static !important; transform: none !important; left: auto !important; top: auto !important; }
.table-data-feature .item.recibo:hover { background: #1f3a68 !important; color: #fff !important; }
.table-data-feature .item.recibo:hover i { color: #fff; }

/* Botones de colores (12/10/2026) */
.pz-accesos.color a{color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.pz-accesos.color a:hover{color:#fff;filter:brightness(1.1);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.pz-accesos.color a .ico{background:#fff}
.pz-accesos.color a.c-cob{background:linear-gradient(135deg,#2bb04f,#14833a)}
.pz-accesos.color a.c-cob .ico{color:#1e7e34;animation:pzlat 2.4s infinite}
.pz-accesos.color a.c-ins{background:#c8102e}.pz-accesos.color a.c-ins .ico{color:#c8102e}
.pz-accesos.color a.c-pu{background:#00838f}.pz-accesos.color a.c-pu .ico{color:#00838f}
.pz-accesos.color a.c-pa{background:#e8750a}.pz-accesos.color a.c-pa .ico{color:#e8750a}
.pz-accesos.color a.c-pr{background:#1f3a68}.pz-accesos.color a.c-pr .ico{color:#1f3a68}
.pz-accesos.color a.c-ca{background:#6a3fb5}.pz-accesos.color a.c-ca .ico{color:#6a3fb5}
@keyframes pzlat{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.35)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.08)}}

/* Inicio: botones con el estilo de Pagos, 2 filas de 3 (12/10/2026) */
.pz-accesos.inicio3{grid-template-columns:repeat(3,1fr);gap:14px}
.pz-accesos.inicio3 a{border-radius:10px;padding:10px 14px;min-height:62px;font-weight:700;font-size:14px;gap:12px}
.pz-accesos.inicio3 a .ico{width:32px;height:32px;flex:0 0 32px;font-size:1rem;font-weight:800}
.pz-accesos.inicio3 a.c-cob{box-shadow:0 4px 12px rgba(30,126,52,.35)}
.pz-accesos.inicio3 a.c-ins{box-shadow:0 4px 10px rgba(200,16,46,.3)}
.pz-accesos.inicio3 a.c-pu{box-shadow:0 4px 10px rgba(0,131,143,.3)}
.pz-accesos.inicio3 a.c-pa{box-shadow:0 4px 10px rgba(232,117,10,.3)}
.pz-accesos.inicio3 a.c-pr{box-shadow:0 4px 10px rgba(31,58,104,.3)}
.pz-accesos.inicio3 a.c-ca{box-shadow:0 4px 10px rgba(106,63,181,.3)}
@media (max-width:700px){.pz-accesos.inicio3{grid-template-columns:1fr}}