/*
 * Sistema visual de Relevo, la herramienta de comunicacion interna.
 *
 * Paleta de sector de seguridad: escudo azul marino casi carbon, y un amarillo de senal que
 * se reserva para lo que necesita a alguien ahora.
 *
 * Sigue la misma linea que el modulo de Proyectos de Apunts: un acento de marca del que se
 * derivan todos los neutros con color-mix(), de modo que cambiar `--mc-marca` reviste la
 * aplicacion entera sin tocar una linea mas.
 *
 * No se cargan fuentes externas. Es una herramienta interna que se abre decenas de veces al
 * dia, muchas desde el movil en sitios con mala cobertura: una peticion de red bloqueante
 * por pagina no compensa. Se usa la pila del sistema, separando display, texto y datos.
 *
 * Bootstrap 5 llega por CDN y pone la retícula y los componentes; esto de aqui pone el tema.
 */

/* ========================================================= 1. Fundamentos */

:root {
    /* Cambiando esto se reviste la aplicacion entera. */
    --mc-marca: #1d3f66;

    /*
     * Amarillo de senal. Se reserva para una sola cosa, lo que
     * necesita a alguien ahora (el boton de Visto, la pestana activa). Nunca como color de
     * texto sobre blanco: no tiene contraste; siempre como fondo con texto oscuro encima.
     */
    --mc-senal: #f2cf1b;
    --mc-senal-fuerte: #d9b60c;
    --mc-senal-texto: #1e3350;

    /* ---- Tipografia ---- */
    --mc-fuente-texto: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    --mc-fuente-display: 'Segoe UI Variable Display', 'Segoe UI Semibold', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mc-fuente-datos: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;

    /* ---- Escala de espaciado ---- */
    --mc-e1: .25rem;
    --mc-e2: .5rem;
    --mc-e3: .75rem;
    --mc-e4: 1rem;
    --mc-e5: 1.5rem;
    --mc-e6: 2rem;

    /* ---- Radios ---- */
    --mc-radio-s: 8px;
    --mc-radio: 11px;
    --mc-radio-l: 14px;

    /* ---- Acentos derivados de la marca ---- */
    --mc-acento: var(--mc-marca);
    --mc-acento-fuerte: color-mix(in srgb, var(--mc-marca) 78%, #000);
    --mc-acento-suave: color-mix(in srgb, var(--mc-marca) 10%, #fff);
    --mc-acento-borde: color-mix(in srgb, var(--mc-marca) 34%, #fff);

    /*
     * Neutros con sesgo hacia la marca: un gris puro al lado de un azul se ve sucio.
     * Un 4-14% de la marca los ata a la paleta sin llegar a tenirlos.
     */
    --mc-fondo: color-mix(in srgb, var(--mc-marca) 5%, #eef1f3);
    --mc-superficie: #ffffff;
    --mc-superficie-2: color-mix(in srgb, var(--mc-marca) 4%, #f4f6f7);
    --mc-superficie-3: color-mix(in srgb, var(--mc-marca) 9%, #eaeef1);

    /* Barra superior: el azul del escudo del logo. */
    --mc-barra-bg: #1b2d45;
    --mc-barra-texto: #c8d2da;

    --mc-borde: color-mix(in srgb, var(--mc-marca) 14%, #d3d9dd);
    --mc-borde-suave: color-mix(in srgb, var(--mc-marca) 8%, #e4e9ec);

    --mc-texto: color-mix(in srgb, var(--mc-marca) 12%, #10151a);
    --mc-texto-2: color-mix(in srgb, var(--mc-marca) 10%, #4d5761);
    --mc-texto-3: color-mix(in srgb, var(--mc-marca) 8%, #737e88);

    /* ---- Semanticos: separados del acento a proposito ---- */
    --mc-ok: #2c6e49;
    --mc-ok-suave: #e4efe8;
    --mc-aviso: #9a5f07;
    --mc-aviso-suave: #f8efdf;
    --mc-error: #a33128;
    --mc-error-suave: #f7e7e5;

    /* ---- Elevacion ---- */
    --mc-sombra-1: 0 1px 2px rgba(16, 21, 26, .05);
    --mc-sombra-2: 0 1px 2px rgba(16, 21, 26, .05), 0 8px 20px -12px rgba(16, 21, 26, .22);
    --mc-sombra-3: 0 12px 36px -14px rgba(16, 21, 26, .34);

    /* ---- Bootstrap ---- */
    --bs-body-bg: var(--mc-fondo);
    --bs-body-color: var(--mc-texto);
    --bs-body-font-family: var(--mc-fuente-texto);
    --bs-border-color: var(--mc-borde);
    --bs-secondary-color: var(--mc-texto-2);
    --bs-emphasis-color: var(--mc-texto);
    --bs-primary: var(--mc-acento);
    --bs-link-color: var(--mc-acento);
    --bs-link-hover-color: var(--mc-acento-fuerte);
    --bs-border-radius: var(--mc-radio);
    --bs-border-radius-sm: var(--mc-radio-s);
    --bs-border-radius-lg: var(--mc-radio-l);
}

body {
    font-family: var(--mc-fuente-texto);
    background-color: var(--mc-fondo);
    color: var(--mc-texto);
    font-size: .94rem;
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-header,
.navbar-brand {
    font-family: var(--mc-fuente-display);
    letter-spacing: -.01em;
    color: var(--mc-texto);
}

/* Fechas, horas y contadores: no bailan al cambiar de fila. */
.mc-dato {
    font-family: var(--mc-fuente-datos);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    color: var(--mc-texto-3);
}

/* Bootstrap 5.3 pinta los enlaces con --bs-link-color-rgb, no con --bs-link-color, y un
   color derivado con color-mix() no se puede expresar como triplete rgb. Se fija aqui. */
a {
    color: var(--mc-acento);
    text-underline-offset: .18em;
}

a:hover {
    color: var(--mc-acento-fuerte);
}

/* =========================================================== 2. Cabecera */

.mc-barra {
    background: var(--mc-barra-bg);
    /* El filo amarillo de los dos escudos. */
    border-bottom: 3px solid var(--mc-senal);
    box-shadow: var(--mc-sombra-2);
}

.mc-barra .navbar-brand {
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: var(--mc-e2);
}

.mc-barra .navbar-brand img {
    display: block;
    height: 29px;
    width: auto;
}

.mc-barra .nav-link {
    color: var(--mc-barra-texto);
    font-weight: 500;
    padding: .4rem .75rem;
    border-radius: var(--mc-radio-s);
    transition: background-color .15s ease, color .15s ease;
}

.mc-barra .nav-link:hover,
.mc-barra .nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .09);
}

.mc-barra .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 -2px 0 var(--mc-senal);
}

.mc-barra .dropdown-menu {
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio);
    box-shadow: var(--mc-sombra-3);
    padding: var(--mc-e1);
}

.mc-barra .dropdown-item {
    border-radius: var(--mc-radio-s);
    padding: .5rem .7rem;
    font-size: .9rem;
}

.mc-barra .dropdown-item i {
    width: 1.1rem;
    color: var(--mc-texto-3);
}

/* Cuenta de tareas sin hacer: el dato que trae a la gente aqui. */
.mc-cuenta {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--mc-error);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ========================================================= 3. Estructura */

.mc-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mc-e3) var(--mc-e5);
    margin-bottom: var(--mc-e5);
}

.mc-encabezado h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: .15rem;
}

.mc-encabezado p {
    margin-bottom: 0;
    color: var(--mc-texto-2);
    font-size: .88rem;
    max-width: 70ch;
}

.breadcrumb {
    font-size: .85rem;
    margin-bottom: var(--mc-e2);
    --bs-breadcrumb-divider-color: var(--mc-texto-3);
}

/* ========================================================= 4. Superficies */

.card {
    background: var(--mc-superficie);
    border: 1px solid var(--mc-borde-suave);
    border-radius: var(--mc-radio);
    box-shadow: var(--mc-sombra-1);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--mc-borde-suave);
    padding: var(--mc-e3) var(--mc-e4);
    font-size: .9rem;
    font-weight: 600;
}

.card-body { padding: var(--mc-e4); }

.card-footer {
    background: var(--mc-superficie-2);
    border-top: 1px solid var(--mc-borde-suave);
    padding: var(--mc-e3) var(--mc-e4);
    border-radius: 0 0 var(--mc-radio) var(--mc-radio);
}

.list-group-item {
    background: transparent;
    border-color: var(--mc-borde-suave);
    padding: var(--mc-e3) var(--mc-e4);
}

/* Tarjeta destacada: lo que le toca al usuario en este proyecto. */
.mc-mio {
    border-color: var(--mc-acento-borde);
    box-shadow: var(--mc-sombra-2);
}

.mc-mio > .card-header {
    background: var(--mc-acento-suave);
    border-bottom-color: var(--mc-acento-borde);
    color: var(--mc-acento-fuerte);
}

/* ============================================================ 5. Tablas */

.table {
    --bs-table-border-color: var(--mc-borde-suave);
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.table > thead th {
    background: var(--mc-superficie-2);
    color: var(--mc-texto-3);
    font-family: var(--mc-fuente-display);
    font-size: .78rem;
    font-weight: 600;
    padding: var(--mc-e3) var(--mc-e4);
    border-bottom: 1px solid var(--mc-borde);
    white-space: nowrap;
}

.table > tbody td {
    padding: var(--mc-e3) var(--mc-e4);
    vertical-align: middle;
    border-color: var(--mc-borde-suave);
}

.table-hover > tbody > tr:hover > * {
    background: var(--mc-superficie-2);
}

/* ====================================================== 6. Lo que se pulsa */

.btn {
    --bs-btn-font-family: var(--mc-fuente-display);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--mc-radio-s);
    --bs-btn-padding-y: .45rem;
    --bs-btn-padding-x: .85rem;
    font-size: .88rem;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-primary {
    --bs-btn-bg: var(--mc-acento);
    --bs-btn-border-color: var(--mc-acento);
    --bs-btn-hover-bg: var(--mc-acento-fuerte);
    --bs-btn-hover-border-color: var(--mc-acento-fuerte);
    --bs-btn-active-bg: var(--mc-acento-fuerte);
    --bs-btn-active-border-color: var(--mc-acento-fuerte);
    box-shadow: var(--mc-sombra-1);
}

/* La accion que necesita a alguien ahora: dar el visto. Amarillo de las dos empresas,
   el mismo del check del logo, con texto oscuro para que se lea. */
.btn-senal {
    --bs-btn-bg: var(--mc-senal);
    --bs-btn-border-color: var(--mc-senal-fuerte);
    --bs-btn-color: var(--mc-senal-texto);
    --bs-btn-hover-bg: #f7d93a;
    --bs-btn-hover-border-color: var(--mc-senal-fuerte);
    --bs-btn-hover-color: var(--mc-senal-texto);
    --bs-btn-active-bg: var(--mc-senal-fuerte);
    --bs-btn-active-border-color: var(--mc-senal-fuerte);
    --bs-btn-active-color: var(--mc-senal-texto);
}

.btn-success {
    --bs-btn-bg: var(--mc-ok);
    --bs-btn-border-color: var(--mc-ok);
    --bs-btn-hover-bg: color-mix(in srgb, var(--mc-ok) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--mc-ok) 82%, #000);
}

.btn-warning {
    --bs-btn-bg: var(--mc-aviso);
    --bs-btn-border-color: var(--mc-aviso);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--mc-aviso) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--mc-aviso) 82%, #000);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-secondary {
    --bs-btn-color: var(--mc-texto-2);
    --bs-btn-border-color: var(--mc-borde);
    --bs-btn-hover-bg: var(--mc-superficie-2);
    --bs-btn-hover-color: var(--mc-texto);
    --bs-btn-hover-border-color: var(--mc-texto-3);
}

.btn-outline-primary {
    --bs-btn-color: var(--mc-acento);
    --bs-btn-border-color: var(--mc-acento-borde);
    --bs-btn-hover-bg: var(--mc-acento);
    --bs-btn-hover-border-color: var(--mc-acento);
}

.btn-outline-danger {
    --bs-btn-color: var(--mc-error);
    --bs-btn-border-color: color-mix(in srgb, var(--mc-error) 30%, #fff);
    --bs-btn-hover-bg: var(--mc-error);
    --bs-btn-hover-border-color: var(--mc-error);
}

.form-label {
    font-family: var(--mc-fuente-display);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: var(--mc-e1);
}

.form-control,
.form-select {
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio-s);
    padding: .48rem .7rem;
    font-size: .92rem;
    background-color: var(--mc-superficie);
    color: var(--mc-texto);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mc-acento);
    box-shadow: 0 0 0 3px var(--mc-acento-suave);
}

.form-control::placeholder { color: var(--mc-texto-3); }

.form-text {
    font-size: .82rem;
    color: var(--mc-texto-3);
    max-width: 68ch;
}

.form-check-input:checked {
    background-color: var(--mc-acento);
    border-color: var(--mc-acento);
}

.form-check-input:focus {
    border-color: var(--mc-acento);
    box-shadow: 0 0 0 3px var(--mc-acento-suave);
}

:focus-visible {
    outline: 2px solid var(--mc-acento);
    outline-offset: 2px;
}

/* ======================================================= 7. Distintivos */

.mc-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-e1);
    font-size: .74rem;
    font-weight: 500;
    padding: .12rem .5rem;
    border-radius: var(--mc-radio-s);
    background: var(--mc-superficie-2);
    border: 1px solid var(--mc-borde-suave);
    color: var(--mc-texto-2);
    white-space: nowrap;
}

.mc-etiqueta-acento {
    border-color: var(--mc-acento-borde);
    color: var(--mc-acento);
    background: var(--mc-acento-suave);
}

.mc-etiqueta-ok {
    border-color: color-mix(in srgb, var(--mc-ok) 30%, #fff);
    color: var(--mc-ok);
    background: var(--mc-ok-suave);
    font-weight: 600;
}

.mc-etiqueta-aviso {
    border-color: color-mix(in srgb, var(--mc-aviso) 30%, #fff);
    color: var(--mc-aviso);
    background: var(--mc-aviso-suave);
    font-weight: 600;
}

.mc-etiqueta-error {
    border-color: color-mix(in srgb, var(--mc-error) 30%, #fff);
    color: var(--mc-error);
    background: var(--mc-error-suave);
    font-weight: 600;
}

.mc-etiqueta-inerte {
    color: var(--mc-texto-3);
}

/* ================================================== 8. Mensaje del cliente */

/* Se guarda sin tocar una coma, y se presenta como lo que es: una transcripcion. */
.mc-transcripcion {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--mc-texto);
    background: var(--mc-superficie-2);
    border: 1px solid var(--mc-borde-suave);
    border-radius: var(--mc-radio-s);
    padding: var(--mc-e3) var(--mc-e4);
    max-width: 74ch;
}

/* ============================================================ 9. Avance */

.mc-semaforo {
    height: .4rem;
    border-radius: 999px;
    background: var(--mc-superficie-3);
    overflow: hidden;
}

.mc-semaforo .progress-bar { transition: none; }

/* ==================================================== 10. Estados vacios */

.mc-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-e3);
    padding: var(--mc-e6) var(--mc-e4);
    background: var(--mc-superficie);
    border: 1.5px dashed var(--mc-borde);
    border-radius: var(--mc-radio-l);
    text-align: center;
    color: var(--mc-texto-3);
    font-size: .88rem;
}

.mc-vacio-icono {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--mc-acento-suave);
    color: var(--mc-acento);
    font-size: 1.3rem;
}

.mc-vacio-titulo {
    font-family: var(--mc-fuente-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mc-texto);
    margin: 0;
}

.mc-vacio p { margin: 0; max-width: 46ch; }

/* ====================================================== 11. Avisos flash */

.alert {
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio);
    padding: var(--mc-e3) var(--mc-e4);
    font-size: .89rem;
    box-shadow: var(--mc-sombra-1);
}

.alert-success { background: var(--mc-ok-suave); border-color: color-mix(in srgb, var(--mc-ok) 26%, #fff); color: var(--mc-ok); }
.alert-danger  { background: var(--mc-error-suave); border-color: color-mix(in srgb, var(--mc-error) 26%, #fff); color: var(--mc-error); }
.alert-warning { background: var(--mc-aviso-suave); border-color: color-mix(in srgb, var(--mc-aviso) 26%, #fff); color: var(--mc-aviso); }
.alert-info    { background: var(--mc-acento-suave); border-color: var(--mc-acento-borde); color: var(--mc-acento-fuerte); }

/* ============================================================ 12. Acceso */

.mc-acceso {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(900px 480px at 50% -10%, color-mix(in srgb, var(--mc-marca) 70%, transparent), transparent 70%),
        var(--mc-barra-bg);
    border-top: 4px solid var(--mc-senal);
}

.mc-acceso .card {
    border: 0;
    border-radius: var(--mc-radio-l);
    box-shadow: var(--mc-sombra-3);
}

.mc-acceso-marca {
    text-align: center;
    color: #fff;
    margin-bottom: var(--mc-e5);
}

.mc-acceso-marca img {
    display: block;
    margin: 0 auto var(--mc-e3);
    height: 72px;
    width: auto;
}

.mc-acceso-marca h1 {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}

.mc-acceso-marca p {
    text-wrap: balance;
    color: rgba(255, 255, 255, .6);
    font-size: .88rem;
    margin: .2rem 0 0;
}

/* =========================================================== 13. Movil */

/* El uso real: el telefono, con una mano, para dar un visto. */
@media (max-width: 767.98px) {
    .mc-encabezado h1 { font-size: 1.3rem; }

    .btn-accion {
        min-height: 2.75rem;
        font-size: .94rem;
    }

    .mc-accion-ancha { width: 100%; }

    .card-body, .card-header, .card-footer, .list-group-item {
        padding-inline: var(--mc-e3);
    }

    /* Cinco columnas no caben en un telefono: cada fila pasa a ser una ficha. */
    .mc-tabla-fichas thead { display: none; }

    .mc-tabla-fichas tbody tr {
        display: block;
        background: var(--mc-superficie);
        border: 1px solid var(--mc-borde-suave);
        border-radius: var(--mc-radio);
        box-shadow: var(--mc-sombra-1);
        margin-bottom: var(--mc-e3);
        padding: var(--mc-e2) var(--mc-e3);
    }

    .mc-tabla-fichas tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--mc-e4);
        border: 0;
        padding: var(--mc-e1) 0;
    }

    .mc-tabla-fichas tbody td::before {
        content: attr(data-etiqueta);
        font-family: var(--mc-fuente-display);
        font-size: .8rem;
        font-weight: 600;
        color: var(--mc-texto-3);
        flex-shrink: 0;
    }

    /* Una celda sin contenido no deja su etiqueta colgando. */
    .mc-tabla-fichas tbody td:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ================================================== 14. Avance de proyecto */

/* Dos medidas distintas de un mismo proyecto: lo mirado y lo hecho. Se apilan
   para poder compararlas de un vistazo, con la de vistas siempre arriba. */
.mc-avances {
    display: flex;
    flex-direction: column;
    gap: var(--mc-e2);
    min-width: 10rem;
}

.mc-avance-cab {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--mc-e2);
    font-size: .78rem;
    color: var(--mc-texto-3);
    margin-bottom: .15rem;
}

.mc-barra-vistas { background-color: var(--mc-acento); }
.mc-barra-realizadas { background-color: var(--mc-ok); }

/* ===================================================== 15. Marcas de tarea */

/* Visto y Realizado son independientes y se muestran siempre los dos: verde
   lo que ya esta, apagado lo que falta. Una sola etiqueta obligaria a deducir
   el estado; dos lo dicen. */
.mc-marcas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--mc-e1);
}

.mc-marca {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .76rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: var(--mc-radio-s);
    border: 1px solid transparent;
    white-space: nowrap;
}

.mc-marca i { font-size: .7em; }

.mc-marca-si {
    background: var(--mc-ok-suave);
    border-color: color-mix(in srgb, var(--mc-ok) 30%, #fff);
    color: var(--mc-ok);
}

.mc-marca-no {
    background: var(--mc-superficie-2);
    border-color: var(--mc-borde-suave);
    color: var(--mc-texto-3);
    font-weight: 500;
}

.mc-marcas-detalle { display: block; margin-top: .2rem; }

.pagination {
    --bs-pagination-border-color: var(--mc-borde);
    --bs-pagination-color: var(--mc-texto-2);
    --bs-pagination-border-radius: var(--mc-radio-s);
    --bs-pagination-hover-bg: var(--mc-superficie-2);
    --bs-pagination-hover-color: var(--mc-texto);
    --bs-pagination-active-bg: var(--mc-acento);
    --bs-pagination-active-border-color: var(--mc-acento);
    --bs-pagination-disabled-color: var(--mc-texto-3);
    --bs-pagination-disabled-border-color: var(--mc-borde-suave);
}


/* =========================================================== 16. Select2 */

/* Mismo aspecto que un .form-control, y cada elegido como una etiqueta de la aplicacion. */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    min-height: calc(1.5em + .96rem + 2px);
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio-s);
    background-color: var(--mc-superficie);
    padding: .2rem .35rem;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--mc-acento);
    box-shadow: 0 0 0 3px var(--mc-acento-suave);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin: .15rem .25rem .15rem 0;
    padding: .12rem .5rem .12rem .3rem;
    border: 1px solid var(--mc-acento-borde);
    border-radius: var(--mc-radio-s);
    background: var(--mc-acento-suave);
    color: var(--mc-acento-fuerte);
    font-size: .82rem;
    font-weight: 500;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    border: 0;
    padding: 0 .2rem;
    color: var(--mc-acento);
    background: transparent;
    font-weight: 700;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent;
    color: var(--mc-error);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0;
}

.select2-container .select2-search--inline .select2-search__field {
    height: 1.7rem;
    margin: .15rem 0 0 .2rem;
    line-height: 1.7rem;
    font-family: var(--mc-fuente-texto);
    font-size: .92rem;
}

.select2-dropdown {
    border: 1px solid var(--mc-borde);
    border-radius: var(--mc-radio-s);
    box-shadow: var(--mc-sombra-3);
    overflow: hidden;
}

.select2-container--default .select2-results__option {
    padding: .5rem .75rem;
    font-size: .92rem;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--mc-acento);
    color: #fff;
}

.select2-container--default .select2-results__option--selected {
    background: var(--mc-acento-suave);
    color: var(--mc-acento-fuerte);
}

/* =================================================== 17. Movil primero */

/* Colores de Bootstrap que se salian de la paleta. */
.btn-outline-warning {
    --bs-btn-color: var(--mc-aviso);
    --bs-btn-border-color: color-mix(in srgb, var(--mc-aviso) 35%, #fff);
    --bs-btn-hover-bg: var(--mc-aviso);
    --bs-btn-hover-border-color: var(--mc-aviso);
    --bs-btn-hover-color: #fff;
}

.text-bg-info {
    background-color: var(--mc-acento-suave) !important;
    color: var(--mc-acento-fuerte) !important;
}

/* Barra de pestanas del movil: las cuatro secciones de uso diario, abajo. */
.mc-pestanas {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--mc-barra-bg);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -6px 20px -10px rgba(16, 21, 26, .45);
    /* El indicador de inicio del iPhone no tapa las pestanas. */
    padding-bottom: env(safe-area-inset-bottom);
}

.mc-pestanas a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 3.6rem;
    color: var(--mc-barra-texto);
    font-size: .72rem;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.mc-pestanas a i {
    font-size: 1.15rem;
}

.mc-pestanas a.activa {
    color: #fff;
    box-shadow: inset 0 3px 0 var(--mc-senal);
}

.mc-pestanas a.activa i {
    color: var(--mc-senal);
}

.mc-pestana-icono {
    position: relative;
    line-height: 1;
}

.mc-pestana-icono .mc-cuenta {
    position: absolute;
    top: -.45rem;
    right: -.9rem;
    min-width: 1.15rem;
    height: 1.15rem;
    font-size: .64rem;
    box-shadow: 0 0 0 2px var(--mc-barra-bg);
}

.mc-ficha-proyecto .card-body {
    padding: var(--mc-e3);
}

/* Las dos barras de avance, lado a lado en la ficha del movil. */
.mc-avances-fila {
    flex-direction: row;
    gap: var(--mc-e3);
    min-width: 0;
}

.mc-avances-fila .mc-avance {
    flex: 1;
}

@media (max-width: 991.98px) {
    /* Que la barra de pestanas no tape lo ultimo de la pagina. */
    body {
        padding-bottom: calc(3.6rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 767.98px) {
    /* iOS amplia la pagina al tocar un campo con letra de menos de 16 px, y luego
       no la devuelve a su sitio. A 16 px no lo hace. */
    .form-control,
    .form-select,
    .select2-container .select2-search--inline .select2-search__field {
        font-size: 16px;
    }

    main.container {
        padding-top: var(--mc-e4) !important;
    }

    /* Indicadores del panel mas compactos: lo importante esta debajo. */
    .mc-indicador-icono {
        width: 36px !important;
        height: 36px !important;
        font-size: .9rem !important;
    }

    .mc-indicador-valor {
        font-size: 1.3rem !important;
    }

    .card-body:has(> .mc-indicador-icono) {
        padding: var(--mc-e3) !important;
        gap: var(--mc-e2) !important;
    }

    /* Botones de accion de una tarea: a partes iguales y de lado a lado,
       para acertar con el pulgar sin mirar. */
    .mc-acciones-tarea {
        display: flex !important;
        width: 100%;
    }

    .mc-acciones-tarea > form {
        flex: 1;
    }

    .mc-acciones-tarea .btn {
        width: 100%;
    }

    /* "Marcar todo como visto" ocupa el ancho, tambien dentro de una cabecera. */
    form:has(> .mc-accion-ancha) {
        width: 100%;
    }

    /* Botones de "Realizada" de la bandeja, de lado a lado. */
    .list-group-item > form:last-child:has(.btn-success) {
        width: 100%;
    }

    .list-group-item > form:last-child .btn-success {
        width: 100%;
    }
}