/* ─────────────────────────────────────────────────────────────
   DIPLO3 — retoques propios sobre el tema StudyHub.

   Va aparte y se carga DESPUES de style.css: el tema se copio tal
   cual desde la maqueta y no se toca, para poder actualizarlo sin
   perder lo nuestro.
   ───────────────────────────────────────────────────────────── */

/* ── Variables que el tema usa pero nunca define ──────────────
   style.css estiliza los campos de texto asi:

       input[type=text], input[type=password], ... {
         border: var(--border-width) solid var(--color-border);
         border-radius: var(--radius);
         font-size: var(--font-size-b2);
       }

   Ninguna de esas tres variables existe en el archivo (quedaron
   de otra version del tema). Una declaracion con un var() sin
   definir es invalida, y el navegador la resuelve como "sin
   valor" — no la ignora: pisa lo que venia de antes. Como esta
   regla es mas especifica que `.form-control` y llega despues,
   terminaba borrando el borde que Bootstrap ya daba y los campos
   quedaban sin caja, como texto suelto sobre el fondo.

   Definirlas con la paleta real del tema (#DDD8F9 es el borde que
   usa en 101 reglas, 6px el radio mas frecuente) hace que su
   propia regla funcione como fue escrita, en todo el sitio y no
   solo en un formulario.

   Se definen solo las tres que hacen falta para la caja. El mismo
   archivo usa otras dos sin definir —`--font-size-b2` (tamano de
   `body` y `p`) y `--body-color` (color del placeholder)— que se
   dejan como estan a proposito: hoy caen en el valor heredado, que
   ya es el correcto, y ponerles un valor cambiaria la tipografia
   de todo el sitio publico para arreglar un borde. */
:root {
    --border-width: 1px;
    --color-border: #DDD8F9;
    --radius: 6px;
}

/* El tema deja los campos en `padding: 0 15px`, sin aire arriba ni
   abajo: con el borde ya visible quedan demasiado apretados. */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=tel],
input[type=date],
input[type=file],
select,
textarea {
    width: 100%;
    padding: 10px 15px;
    background: var(--color-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Sin esto no hay ninguna senal de que campo esta activo: el tema
   apaga el outline del navegador y no pone nada en su lugar. */
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(85, 60, 223, 0.12);
}

/* Bootstrap marca el campo con error en rojo; el borde del tema le
   ganaba por especificidad y el error pasaba desapercibido. */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--color-danger);
}

input.is-invalid:focus,
select.is-invalid,
textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

/* ── Formularios del panel ───────────────────────────────────── */

/* La etiqueta iba con el mismo peso que el dato y costaba separar
   una de otro de un vistazo. */
.dashboard--area-main .form-label {
    font-weight: var(--p-medium);
    color: var(--color-secondary);
    margin-bottom: 6px;
}

/* El tema pone `background: transparent` a todo `input`, y a la
   casilla de Bootstrap eso la deja como un cuadrado opaco sin
   marca de tildado. */
/* El tema no usa el checkbox nativo: lo esconde (`opacity: 0`) y
   dibuja la caja en `label::before`, con el tilde en `::after`.
   Funciona, pero la pinta sin marcar es un cuadrado macizo oscuro
   (#5d5d7e), que se lee como "ya tildado" — justo al reves.

   Se respeta su mecanismo y se corrige solo el color: vacio =
   blanco con borde, tildado = color primario. */
.dashboard--area-main input[type=checkbox] ~ label::before {
    background-color: var(--color-white);
    border: 1px solid #B9B1E8;
    border-radius: 4px;
    width: 17px;
    height: 17px;
}

.dashboard--area-main input[type=checkbox]:checked ~ label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* El tilde del tema es un angulo blanco: sobre fondo blanco no se
   veria, asi que solo aparece cuando la caja ya esta pintada. */
.dashboard--area-main input[type=checkbox]:checked ~ label::after {
    left: 3px;
}

/* 12px es el tamano que el tema le da a estas etiquetas; en un
   formulario de perfil queda ilegible al lado del resto. */
.dashboard--area-main input[type=checkbox] ~ label {
    font-size: 14px;
    line-height: 20px;
}

/* ── Badges de estado ────────────────────────────────────────
   Los enums devuelven clases `badge-light-*`, que son del tema
   Cork del backoffice y no existen en StudyHub. Con solo `.badge`
   de Bootstrap el texto sale blanco y sin fondo: en el panel del
   estudiante la columna "Estado del pago" se veia vacia, y lo
   mismo el estado de cada modulo y el rol del docente.

   Se replican aca con la paleta de StudyHub en vez de cambiar los
   enums, que los comparten las dos interfaces: tocarlos arreglaria
   el panel y rompería el backoffice. */
.dashboard--area-main .badge,
.rts-reviewd-area-dashed .badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: var(--p-medium);
    line-height: 1.4;
}

.badge-light-primary { background: #EFECFF; color: #553CDF; }
.badge-light-success { background: #E3F7EC; color: #1B7F4F; }
.badge-light-info { background: #E4F1FD; color: #1667A8; }
.badge-light-warning { background: #FDF2DE; color: #96650B; }
.badge-light-danger { background: #FDE7E9; color: #B02330; }
.badge-light-secondary { background: #F0F0F2; color: #5C5C66; }
.badge-light-dark { background: #E2E2E6; color: #1F1F25; }

/* ── Tarjeta de resumen de "Mi Panel" ────────────────────────
   El titulo y el avance a la izquierda, el boton "Continuar" a la
   derecha y a la misma altura — la posicion que le da la maqueta
   `quick-attempts.html` en su banner. */
.panel-resumen {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.panel-resumen__texto {
    flex: 1 1 320px;
    min-width: 0;
}

/* En pantalla angosta el boton pasa abajo y se alinea a la
   izquierda, con el resto del texto. */
.panel-resumen__accion {
    flex: 0 0 auto;
    text-align: right;
}

@media (max-width: 575px) {
    .panel-resumen__accion {
        text-align: left;
    }
}

.continuar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* ── Pagos del estudiante ────────────────────────────────────
   Los tres numeros de arriba: costo, pagado y saldo. El saldo se
   pinta distinto segun deba o este al dia, que es la respuesta que
   el estudiante entra a buscar. */
.pago-dato {
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #FBFAFF;
}

.pago-dato__rotulo {
    display: block;
    font-size: 13px;
    color: var(--color-body);
    margin-bottom: 4px;
}

.pago-dato__valor {
    display: block;
    font-size: 20px;
    font-weight: var(--p-bold);
    color: var(--color-secondary);
}

.pago-dato--debe {
    border-color: #F3C9CE;
    background: #FDF6F7;
}

.pago-dato--debe .pago-dato__valor {
    color: #B02330;
}

.pago-dato--ok {
    border-color: #BFE6D2;
    background: #F5FBF8;
}

.pago-dato--ok .pago-dato__valor {
    color: #1B7F4F;
}

/* La subida sale de la celda de la tabla y pasa a ser un bloque
   propio: es la unica accion de la pantalla. */
.subir-comprobante {
    padding: 18px 20px;
    border: 1px dashed #B9B1E8;
    border-radius: 8px;
    background: #FBFAFF;
}

.subir-comprobante__texto p {
    font-size: 14px;
    color: var(--color-body);
    margin-top: 4px;
}

.subir-comprobante__form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 14px;
}

.subir-comprobante__monto {
    flex: 0 1 170px;
}

.subir-comprobante__archivo {
    flex: 1 1 260px;
}

.subir-comprobante__form .form-label {
    display: block;
    font-size: 13px;
    color: var(--color-body);
    margin-bottom: 6px;
}

/* El boton no tiene etiqueta arriba, asi que sin esto queda mas alto
   que los dos campos con los que se alinea. */
.subir-comprobante__form .rts-btn {
    margin-bottom: 1px;
}

/* Foto de perfil: el circulo tiene que recortar la imagen, no
   deformarla, sea cual sea la proporcion que suba el usuario. */
.avatar-preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-white);
}