/* ======================================================
   VARIABLES
====================================================== */

:root{

    --color-primario:#0d6efd;
    --color-fondo:#f4f6f9;
    --color-texto:#222;
    --color-borde:#dcdfe5;

    --ancho-maximo:1200px;

}

/* ======================================================
   GENERAL
====================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:"Segoe UI",Arial,Helvetica,sans-serif;

    background:var(--color-fondo);

    color:var(--color-texto);

}

/* ======================================================
   CONTENEDOR
====================================================== */

.contenedor{

    width:min(95%,var(--ancho-maximo));

    margin:auto;

}

/* ======================================================
   ENCABEZADO
====================================================== */

.encabezado{

    background:#111111;

    color:white;

    padding:32px 0;

    margin-bottom:30px;

    box-shadow:0 3px 12px rgba(0,0,0,.15);

}

.encabezado h1{

    font-size:2rem;

    margin-bottom:8px;

}

.encabezadoContenido{

    display:flex;

    align-items:center;

    gap:34px;

}

.subtitulo{

    opacity:.9;

}

.logoMalharro{

    width:92px;

    height:auto;

    flex-shrink:0;

}

/* ======================================================
   BARRA DE BÚSQUEDA
====================================================== */

.busqueda{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    align-items:end;

    gap:12px;

    margin-bottom:28px;

}

/* ======================================================
   CONTROLES
====================================================== */

#filtroMateria,
#filtroCarrera,
#filtroAnio,
#filtroTurno,
#filtroFecha,
#filtroInscriptos,
#filtroOrden{

    width:100%;

    min-width:0;

    height:50px;

    padding:0 16px;

    border-radius:12px;

    border:1px solid var(--color-borde);

    background:white;

    font-size:1rem;

    outline:none;

    transition:.25s;

    cursor:pointer;

}

#filtroMateria:focus,
#filtroCarrera:focus,
#filtroAnio:focus,
#filtroTurno:focus,
#filtroFecha:focus,
#filtroInscriptos:focus,
#filtroOrden:focus{

    border-color:var(--color-primario);

    box-shadow:0 0 0 4px rgba(13,110,253,.15);

}

#txtBuscar{

    grid-column:1 / -1;

    min-width:0;

    height:50px;

    padding:0 18px;

    border-radius:12px;

    border:1px solid var(--color-borde);

    outline:none;

    font-size:1rem;

    transition:.25s;

}

#txtBuscar:focus{

    border-color:var(--color-primario);

    box-shadow:0 0 0 4px rgba(13,110,253,.15);

}

/* ======================================================
   CONTADOR
====================================================== */

.contadorResultados{

    margin:0;

    color:#666;

    font-size:.95rem;

    font-weight:600;

}

/* ======================================================
   TARJETAS
====================================================== */

#contenedorTarjetas{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(360px,1fr));

    gap:28px;

    padding-bottom:50px;

}

/* ======================================================
   TARJETA
====================================================== */

.tarjeta{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #ececec;

    box-shadow:
        0 4px 12px rgba(0,0,0,.05),
        0 12px 30px rgba(0,0,0,.04);

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}

.tarjeta:hover{

    transform:translateY(-3px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.08);

}
/* ======================================================
   CABECERA
====================================================== */

.cabeceraTarjeta{

    height:8px;

    background:var(--colorCarrera);

    width:100%;

}

.contenidoTarjeta{

    padding:28px;

}

.materia{

    font-size:1.85rem;

    font-weight:700;

    line-height:1.18;

    letter-spacing:-.02em;

    color:#202020;

    margin:0 0 20px;

}

.carrera{

    font-size:1.08rem;

    font-weight:700;

    color:var(--colorCarrera);

    margin-bottom:8px;

}

.curso{

    font-size:.96rem;

    color:#666;

    margin-bottom:26px;

}

.separador{

    border:none;

    border-top:1px dashed #d8d8d8;

    margin:26px 0;

}

/* ======================================================
   CUERPO
====================================================== */

.tarjetaBody{

    padding:20px;

}
/* ======================================================
   FECHA Y HORA
====================================================== */

.datosMesa{

    display:flex;

    flex-direction:column;

    gap:18px;

}
.etiqueta{

    width:110px;

    flex-shrink:0;

    font-size:.76rem;

    font-weight:700;

    color:#d62828;

    text-transform:uppercase;

    letter-spacing:.10em;

}

.valor{

    flex:1;

    font-size:1.05rem;

    line-height:1.6;

    color:#202020;

    font-weight:500;

}
/* ======================================================
   TRIBUNAL
====================================================== */

.tribunal{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.tituloSeccion{

    width:110px;

    flex-shrink:0;

    font-size:.76rem;

    font-weight:700;

    color:#d62828;

    text-transform:uppercase;

    letter-spacing:.10em;

}
.tituloSeccion{

    font-size:.73rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#d62828;

    margin-bottom:8px;

}

.nombreIntegrante{

    flex:1;

    font-size:1rem;

    line-height:1.65;

    color:#222;

}

.nombreIntegrante br{

    display:block;

    content:"";

    margin-top:6px;

}
.sinResultados{

    background:white;

    padding:35px;

    border-radius:15px;

    text-align:center;

    font-size:1.1rem;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

}

/* =====================================================
   DATOS DE LA MESA
===================================================== */

.datosMesa{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.itemDato{

    display:grid;

    grid-template-columns:130px 1fr;

    align-items:center;

    column-gap:14px;

}

.itemDato .etiqueta{

    font-size:.76rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#c62828;

    white-space:nowrap;

}

.itemDato .valor{

    font-size:1rem;

    font-weight:500;

    color:#222;

}

/* ======================================================
   CELULAR
====================================================== */

@media(max-width:600px){

    .encabezado{

    text-align:center;

}

.encabezadoContenido{

    flex-direction:column;

}

.logoMalharro{

    width:72px;

}

    .busqueda{

        grid-template-columns:1fr;

    }

    #txtBuscar,
    #filtroMateria,
    #filtroCarrera,
    #filtroAnio,
    #filtroTurno,
    #filtroFecha,
    #filtroInscriptos,
    #filtroOrden{
        width:100%;

        min-width:0;

    }

    #txtBuscar,
    .barraInferiorFiltros{

        grid-column:auto;

    }

    .materia{

        font-size:1.1rem;

    }

    .fechaHora{

        flex-direction:column;

    }

}

/* ======================================================
   BARRA INFERIOR FILTROS
====================================================== */

.barraInferiorFiltros{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    width:100%;

    grid-column:1 / -1;

    margin-top:4px;

    margin-bottom:0;

}

.accionesFiltros{

    display:flex;

    align-items:end;

    gap:12px;

}

.controlOrden{

    display:flex;

    flex-direction:column;

    gap:5px;

    color:#666;

    font-size:.82rem;

    font-weight:600;

}

.controlOrden #filtroOrden{

    flex:none;

    min-width:170px;

    height:44px;

}

.btnLimpiar{

    background:#ffffff;

    color:var(--color-primario);

    border:1px solid var(--color-borde);

    border-radius:12px;

    height:44px;

    padding:0 18px;

    font-size:.95rem;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btnLimpiar:hover{

    background:var(--color-primario);

    color:white;

}

@media(max-width:900px) and (min-width:601px){

    .busqueda{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:600px){

    .barraInferiorFiltros{

        flex-direction:column;

        align-items:stretch;

    }

    .accionesFiltros{

        width:100%;

        flex-direction:column;

        align-items:stretch;

    }

    .controlOrden #filtroOrden{

        width:100%;

    }

    .btnLimpiar{

        width:100%;

    }

}
/* =====================================================
   BADGES DE ESTADO DE INSCRIPTOS
===================================================== */

.badgeInscriptos,
.badgeSinInscriptos{

    display:inline-flex;

    align-items:center;

    gap:6px;

    align-self:flex-start;

    margin:6px 0 12px;

    padding:6px 12px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:0;

    text-transform:none;

}

.badgeInscriptos{

    background:#e8f5e9;

    color:#2e7d32;

    border:1px solid #b7dfbb;

}

.badgeSinInscriptos{

    background:#efefef;

    color:#808080;

    border:1px solid #c8c8c8;

    opacity:.85;

    filter:grayscale(100%);
}