/**
 * MAE — formularios unificados (.mae-form-layout)
 * Alcance: .main (área autenticada). No altera IDs ni names.
 * Accesibilidad: labels visibles, focus-visible, contraste.
 */

/* ── Contenedor ─────────────────────────────────────────────────── */
.main .mae-form-layout,
.modal .mae-form-layout {
    --mae-form-gap: 1rem;
    --mae-form-radius: 10px;
    --mae-form-border: #dce1ea;
    --mae-form-muted: #5c6470;
    /* Tipografía legible en formularios (~18px cuerpo) */
    --mae-form-font: var(--mae-font-size);
    --mae-form-font-addon: var(--mae-font-size);
    --mae-form-font-label: var(--mae-font-size);
    --mae-form-line: 1.42857143;
}

.main .mae-form-layout .panel-body,
.main .mae-form-layout.panel-body {
    padding-left: clamp(12px, 2vw, 24px);
    padding-right: clamp(12px, 2vw, 24px);
}

/* Evita el efecto "panel dentro de panel" en formularios MAE. */
.main .panel.mae-card > .panel-body.mae-form-layout,
.main .panel.mae-card > .panel-body[id].mae-form-layout {
    border: 0 !important;
    box-shadow: none !important;
}

/*
 * Matrícula por pasos: la “franja blanca” era el fondo de .main .panel (card)
 * sin cubrir la altura real del formulario (columnas flotantes sin .row / BFC).
 * Unificamos fondo panel + cuerpo y forzamos contención del flujo.
 */
.main .mae-form-layout.mae-form-steps .panel {
    background: #f4f5f7;
    border: 1px solid var(--mae-form-border);
    border-radius: var(--mae-radius);
    box-shadow: var(--mae-shadow);
    overflow: hidden;
}

.main .mae-form-layout.mae-form-steps .panel > .panel-body {
    border-radius: 0;
    display: flow-root;
    min-height: 0;
}

/* Pestañas pegadas al panel: quita hueco blanco del theme (bk-margin-top-15) */
.main .mae-form-layout.mae-form-steps .panel > .panel-body > .row > [class*="col-"] > .tabs.tabs-top,
.main .mae-form-layout.mae-form-steps .panel > .panel-body > [class*="col-"] > .tabs.tabs-top {
    margin-top: 0 !important;
    padding-top: 0.35rem;
    background: #f4f5f7;
    border-radius: var(--mae-form-radius) var(--mae-form-radius) 0 0;
}

/* Anula anchos inline típicos (80%, 95%) dentro del layout */
.main .mae-form-layout .form-control {
    width: 100% !important;
    max-width: 100%;
    font-size: var(--mae-form-font);
    line-height: var(--mae-form-line);
}

.main .mae-form-layout table .form-control {
    width: auto !important;
    min-width: 4rem;
}

/* Grupos */
.main .mae-form-layout .form-group {
    margin-bottom: 1rem;
}

.main .mae-form-layout .form-group > label:first-child,
.main .mae-form-layout .form-group > label:not(.checkbox):not(.radio) {
    display: block;
    font-size: var(--mae-form-font-label);
    font-weight: 600;
    color: #1a1d24;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.main .mae-form-layout .form-group .help-block,
.main .mae-form-layout .form-hint {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--mae-form-muted);
}

/* Horizontal: en pantallas pequeñas alinear como vertical */
@media (max-width: 767px) {
    .main .mae-form-layout.form-horizontal .control-label {
        text-align: left !important;
        padding-top: 0;
        margin-bottom: 0.35rem;
    }
}

/*
 * Input groups (Bootstrap 3 = display:table).
 * No usar flex-wrap aquí: rompe la fila y genera “etiquetas burbuja”.
 */
.main .mae-form-layout .input-group {
    display: table !important;
    width: 100% !important;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    /* auto: cada fila dimensiona el addon de texto (evita “Forma de” / “Pago” en dos líneas) */
    table-layout: auto;
}

.main .mae-form-layout .input-group-addon,
.main .mae-form-layout .input-group .form-control,
.main .mae-form-layout .input-group > select.form-control,
.main .mae-form-layout .input-group > .ui-widget,
.main .mae-form-layout .input-group-btn {
    display: table-cell !important;
    float: none !important;
    vertical-align: middle;
}

.main .mae-form-layout .input-group > .ui-widget {
    width: auto;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.main .mae-form-layout .input-group > .ui-widget input.form-control,
.main .mae-form-layout .input-group > .ui-widget input[type="text"],
.main .mae-form-layout .input-group > .ui-widget input[type="search"] {
    width: 100% !important;
}

.main .mae-form-layout .input-group-addon {
    width: 1%;
    white-space: nowrap;
    line-height: var(--mae-form-line);
    padding: 0.55rem 0.85rem;
    font-size: var(--mae-form-font-addon);
    font-weight: 500;
    color: #333;
    background: #eee;
    border: 1px solid #ccc;
    text-align: left;
    vertical-align: middle;
}

.main .mae-form-layout .input-group-addon .fa {
    font-size: 1.125rem;
}

/* Addon izquierdo: una línea, elipsis si no cabe; borde unido al control */
.main .mae-form-layout .input-group-addon:first-child {
    max-width: min(48vw, 17rem);
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 0;
}

/* Addon solo icono (más estrecho); borde unido al control */
.main .mae-form-layout .input-group-addon:last-child:not(:first-child) {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    border-left: 0;
}

.main .mae-form-layout .input-group > .form-control,
.main .mae-form-layout .input-group > select.form-control,
.main .mae-form-layout .input-group > .ui-widget .form-control {
    box-shadow: none;
    position: relative;
    z-index: 2;
}

.main .mae-form-layout .input-group > select.form-control {
    height: auto;
    min-height: 42px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    line-height: var(--mae-form-line);
}

.main .mae-form-layout .input-group > .form-control:not(select),
.main .mae-form-layout .input-group > .ui-widget .form-control {
    min-height: 42px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.main .mae-form-layout .input-group-btn {
    width: 1%;
    white-space: nowrap;
}

.main .mae-form-layout .input-group-btn > .btn {
    min-height: 42px;
    border-radius: 0 8px 8px 0;
}

.main .mae-form-layout .input-group-btn:first-child > .btn {
    border-radius: 8px 0 0 8px;
}

/* Campos deshabilitados: mismo tono (evita gris/blanco incoherente) */
.main .mae-form-layout .form-control:disabled,
.main .mae-form-layout .form-control[disabled],
.main .mae-form-layout select:disabled,
.main .mae-form-layout select[disabled] {
    background-color: #f0f3f8 !important;
    color: #1a1d24;
    opacity: 1;
    cursor: not-allowed;
}

/* Texto introductorio del paso */
.main .mae-form-layout .mae-form-intro {
    margin: 0 0 1.1rem;
    font-size: var(--mae-form-font);
    font-weight: 600;
    color: #333;
    line-height: 1.45;
}

/* Estado de matrícula (solo lectura) alineado con input-group */
.main .mae-form-layout .mae-estado-matricula-badge-wrap {
    display: flex;
    align-items: center;
    min-height: 34px;
    height: auto;
}

.main .mae-form-layout .mae-estado-matricula-badge {
    font-size: 0.95em;
}

/* Acciones: alineados a la derecha con la misma malla que los .form-group */
.main .mae-form-layout .form-actions.pull-right {
    float: none !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.35rem;
    margin-top: 0;
    margin-bottom: 0;
    clear: both;
}

.main .mae-form-layout .form-actions .btn-block {
    width: auto !important;
    min-width: 12rem;
    max-width: 100%;
}

.main .mae-form-layout.mae-form-steps .form-actions .btn {
    font-size: var(--mae-form-font);
    padding: 0.55rem 1.35rem;
}

/* Filas de columnas con más aire */
.main .mae-form-layout.mae-form-steps .tab-pane .form-group {
    margin-bottom: 1.15rem;
}

.main .mae-form-layout.mae-form-steps .tab-pane .form-group [class*="col-"] {
    margin-bottom: 0.35rem;
}

@media (min-width: 768px) {
    .main .mae-form-layout.mae-form-steps .tab-pane .form-group [class*="col-"] {
        margin-bottom: 0;
    }
}

/* Pestañas (pasos matrícula y similares) */
.main .mae-form-layout.mae-form-steps .tabs {
    margin-top: 0.5rem;
}

.main .mae-form-layout.mae-form-steps .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--mae-form-border);
    padding: 0 0.25rem 0;
    margin-bottom: 0;
    background: transparent;
}

.main .mae-form-layout.mae-form-steps .nav-tabs > li {
    float: none;
    margin-bottom: 0;
}

.main .mae-form-layout.mae-form-steps .nav-tabs > li > a {
    border-radius: 8px 8px 0 0;
    margin-right: 0;
    padding: 0.65rem 1.25rem;
    font-size: var(--mae-form-font);
    font-weight: 500;
    color: #444;
    border: 1px solid transparent;
}

.main .mae-form-layout.mae-form-steps .nav-tabs > li.active > a,
.main .mae-form-layout.mae-form-steps .nav-tabs > li.active > a:hover,
.main .mae-form-layout.mae-form-steps .nav-tabs > li.active > a:focus {
    background: #fff;
    border-color: var(--mae-form-border);
    border-bottom-color: #fff;
    color: #1565c0;
    font-weight: 600;
}

.main .mae-form-layout.mae-form-steps .nav-tabs > li:not(.active) > a {
    background: #e6eaf1;
    border: 1px solid #c5ccd8;
    border-bottom-color: transparent;
    color: #3a4454;
}

.main .mae-form-layout.mae-form-steps .nav-tabs > li:not(.active) > a:hover,
.main .mae-form-layout.mae-form-steps .nav-tabs > li:not(.active) > a:focus {
    background: #eef2f8;
    color: #1565c0;
    border-color: #b4bcc9;
    border-bottom-color: transparent;
}

.main .mae-form-layout .tab-content {
    background: #f4f5f7;
    border: 1px solid var(--mae-form-border);
    border-top: none;
    border-radius: 0 0 var(--mae-form-radius) var(--mae-form-radius);
    padding: 0.65rem clamp(12px, 2vw, 20px) clamp(14px, 2vw, 22px);
    margin-bottom: 1rem;
}

/* Campos sobre fondo gris claro: solo el control (no los addons de etiqueta) en blanco */
.main .mae-form-layout.mae-form-steps .tab-content .input-group > .form-control,
.main .mae-form-layout.mae-form-steps .tab-content .input-group > select.form-control,
.main .mae-form-layout.mae-form-steps .tab-content .input-group > .ui-widget .form-control {
    background-color: #fff;
}

.main .mae-form-layout.mae-form-steps .tab-content .form-control:disabled,
.main .mae-form-layout.mae-form-steps .tab-content .form-control[disabled],
.main .mae-form-layout.mae-form-steps .tab-content select:disabled,
.main .mae-form-layout.mae-form-steps .tab-content select[disabled] {
    background-color: #f0f3f8 !important;
}

.main .mae-form-layout.mae-form-steps .nav-tabs.nav-right {
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .main .mae-form-layout.mae-form-steps .nav-tabs.nav-right {
        justify-content: flex-start;
    }
}

/* Form vertical (usuarios) */
.main .mae-form-layout.form-vertical .form-group {
    max-width: 42rem;
}

/* Form bordered legacy: suavizar */
.main .mae-form-layout.form-bordered .form-group {
    border-bottom: 0 !important;
    padding-bottom: 0;
}

/* Botones de acción al pie de sección */
.main .mae-form-layout .form-actions {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.main .mae-form-layout .form-actions .btn {
    margin-bottom: 0;
}

/* HR dentro de formularios */
.main .mae-form-layout hr {
    border: 0;
    border-top: 1px solid #eef1f6;
    margin: 1.25rem 0;
}

/* Modales internos (misma jerarquía visual) */
.main .mae-form-layout .modal-content {
    border-radius: var(--mae-form-radius);
}

/* Focus visible (a11y) */
.main .mae-form-layout .form-control:focus-visible,
.main .mae-form-layout .btn:focus-visible {
    outline: 2px solid #368ee0;
    outline-offset: 2px;
}

/* Texto introductorio suelto (p. ej. inscripción) */
.main .mae-form-layout .tab-pane > .row:first-child {
    margin-top: 0;
}

/* Modales: mismo tratamiento cuando el formulario lleva la clase */
.modal .mae-form-layout .form-control {
    width: 100% !important;
    max-width: 100%;
}

.modal .mae-form-layout .form-group > label:first-child {
    display: block;
    font-size: var(--mae-form-font-label);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* ═══════════════════════════════════════════════════════════════
   Inscripción: sin card exterior, título, tabla modal, estado badge
   ═══════════════════════════════════════════════════════════════ */

.main .mae-page-inscripcion .mae-inscripcion-main {
    padding-bottom: 0.25rem;
}

.main .mae-page-inscripcion .mae-inscripcion-head {
    margin: 0 0 0.35rem;
}

.main .mae-page-inscripcion .mae-inscripcion-title {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 600;
    color: #1a1d24;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .main .mae-page-inscripcion .mae-inscripcion-title {
        font-size: 1.35rem;
    }
}

.main .mae-page-inscripcion.mae-form-steps .mae-inscripcion-main > .row > [class*="col-"] > .tabs.tabs-top {
    margin-top: 0 !important;
    padding-top: 0.35rem;
    background: #f4f5f7;
    border-radius: var(--mae-form-radius) var(--mae-form-radius) 0 0;
}

.main .mae-page-inscripcion.mae-form-steps .tab-content {
    border-radius: 0 0 var(--mae-form-radius) var(--mae-form-radius);
}

/* Estado solo lectura: badge + hidden para POST */
.main .mae-page-inscripcion .mae-estado-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-top: 0.25rem;
}

.main .mae-page-inscripcion .mae-estado-field__label {
    font-size: var(--mae-form-font-label);
    font-weight: 600;
    color: var(--mae-form-muted);
}

.main .mae-page-inscripcion #estado-badge {
    font-size: var(--mae-form-font-addon);
    font-weight: 600;
    padding: 0.4em 0.75em;
    border-radius: 4px;
}

/* Modal “Seleccionar cursos”: estilos movidos desde inline */
.main .mae-page-inscripcion .mae-sel-cursos-table td.mae-cell-curso-nombre {
    max-width: 200px;
    word-wrap: break-word;
}

.main .mae-page-inscripcion .mae-sel-cursos-table .mae-table-input-date {
    border: none;
    box-shadow: none;
    background: transparent;
}

.main .mae-page-inscripcion .mae-sel-cursos-table .mae-table-input-horas {
    border: none;
    box-shadow: none;
    background: transparent;
    max-width: 60px;
}

.main .mae-page-inscripcion .mae-sel-cursos-table .mae-table-input-precio {
    border: none;
    box-shadow: none;
    background: transparent;
    max-width: 90px;
}

.main .mae-page-inscripcion .mae-inscripcion-cursos-actions {
    margin-left: 0;
    margin-right: 0;
    padding: 0.4rem clamp(12px, 2.5vw, 24px) 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: stretch;
}

.main .mae-page-inscripcion .mae-inscripcion-cursos-actions__col {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0;
}

.main .mae-page-inscripcion .mae-inscripcion-cursos-actions__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    padding: 0.55rem 1rem;
    white-space: normal;
    text-align: center;
    font-weight: 600;
    width: 100%;
}

.main .mae-page-inscripcion .mae-inscripcion-cursos-actions__btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1.25;
}

.main .mae-page-inscripcion .mae-sel-cursos-table__agregar {
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

.main .mae-page-inscripcion .mae-btn-add-curso-sel {
    min-width: 2.35rem;
}

/* Cursos existentes en editar matrícula: evitar recorte de columnas */
.main .mae-page-inscripcion .mae-cursos-existentes-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.main .mae-page-inscripcion .mae-cursos-existentes-table {
    min-width: 980px;
}

.main .mae-page-inscripcion .mae-cursos-existentes-table > thead > tr > th {
    white-space: nowrap;
}

.main .mae-page-inscripcion .mae-cursos-existentes-table > tbody > tr > td:nth-child(3) {
    min-width: 220px;
    white-space: normal;
}

.main .mae-page-inscripcion .mae-cursos-existentes-table > tbody > tr > td:nth-child(5),
.main .mae-page-inscripcion .mae-cursos-existentes-table > tbody > tr > td:nth-child(6),
.main .mae-page-inscripcion .mae-cursos-existentes-table > tbody > tr > td:nth-child(7),
.main .mae-page-inscripcion .mae-cursos-existentes-table > tbody > tr > td:nth-child(8) {
    white-space: nowrap;
}

.main .mae-page-inscripcion .mae-cursos-existentes-table > tbody > tr > td:nth-child(5) .form-control {
    width: 88px !important;
    min-width: 88px;
}

.main .mae-page-inscripcion .mae-cursos-existentes-table > tbody > tr > td:nth-child(6) .form-control,
.main .mae-page-inscripcion .mae-cursos-existentes-table > tbody > tr > td:nth-child(7) .form-control {
    width: 64px !important;
    min-width: 64px;
}

.main .mae-page-inscripcion .mae-cursos-existentes-table > tbody > tr > td:nth-child(8) .form-control {
    width: 76px !important;
    min-width: 76px;
}

/* Autocompletado cliente (identificación) — inscripción / técnico / bachiller */
.main .mae-page-inscripcion .input-group:has(.mae-ident-field-wrap) {
    overflow: visible;
}

.main .mae-page-inscripcion .mae-ident-field-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.main .mae-page-inscripcion .mae-ac-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    margin-top: 2px;
    max-height: 260px;
    overflow: auto;
    background: #fff;
    border: 1px solid #cfd4dc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.main .mae-page-inscripcion .mae-ac-panel .table {
    margin-bottom: 0;
}

/* Fechas en pantalla DD/MM/AAAA (envío al servidor vía JS en yyyy-MM-dd) */
.main .mae-date-dmy,
.modal .mae-date-dmy {
    font-variant-numeric: tabular-nums;
}

/* Checkbox que sigue a un input/select dentro de un form-group */
.mae-checkbox-after-input {
    margin-top: 10px;
}

/* Informe de ingresos — filtros y multi-curso */
.mae-informe-filtros .panel-body {
    padding-top: 18px;
}

.mae-informe-filtros .row > [class*="col-"] {
    margin-bottom: 14px;
}

.mae-informe-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 6px;
}

.mae-informe-label-spacer {
    display: none;
}

.mae-informe-row-acciones {
    margin-top: 4px;
}

.mae-informe-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.mae-informe-acciones .btn {
    margin: 0;
    min-width: 130px;
}

.mae-curso-box {
    position: relative;
}

.mae-curso-box-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.mae-curso-box-inner:focus-within {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.4);
}

.mae-curso-chips {
    display: contents;
}

.mae-curso-box-input {
    flex: 1 1 160px;
    min-width: 140px;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    padding: 4px 2px;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
}

.mae-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e8f1fb;
    color: #0b4da1;
    font-size: 12px;
    line-height: 1.2;
}

.mae-chip-remove {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.mae-curso-ac-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 240px;
    overflow: auto;
    background: #fff;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 4px 0;
}

.mae-ac-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: 0;
    border-left: 3px solid transparent;
    background: #fff;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.35;
    color: #1f2937;
    cursor: pointer;
}

.mae-ac-item:hover,
.mae-ac-item:focus {
    background: #f3f7fc;
    border-left-color: #0b4da1;
    outline: none;
}

.mae-ac-item-icon {
    flex: 0 0 auto;
    width: 18px;
    color: #0b4da1;
    opacity: 0.75;
    margin-top: 1px;
}

.mae-ac-item-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.mae-ac-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: #6b7280;
}

.mae-informe-totales {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #1a202c;
}

@media (min-width: 992px) {
    .mae-informe-label-spacer {
        display: block;
    }
}

@media (max-width: 991px) {
    .mae-informe-acciones {
        justify-content: stretch;
    }

    .mae-informe-acciones .btn {
        flex: 1 1 140px;
        min-width: 0;
    }
}

@media (max-width: 575px) {
    .mae-informe-acciones {
        flex-direction: column;
    }

    .mae-informe-acciones .btn {
        width: 100%;
        flex: 1 1 auto;
    }

    .mae-curso-ac-panel {
        max-height: 200px;
    }
}