/**
 * Paleta de la marca y acentos de tarjeta.
 *
 * Éste es el lugar donde viven los colores. Todo lo que CSS puede alcanzar
 * (tarjetas, íconos, bordes) los toma de aquí con var().
 *
 * Las gráficas son la excepción: frappe-charts pinta cada elemento con un
 * `style="fill: …"` en línea calculado en JavaScript, así que no puede leer
 * estas variables. Su copia vive en App\Support\Paleta y una prueba
 * (PaletaTest) verifica que ambas listas coincidan, para que no se separen.
 */
:root {
    --gruas-naranja: #ff7800;
    --gruas-ambar: #ffa200;
    --gruas-oro: #ffc000;
}

/* ---------------------------------------------------------------- tarjetas */

.tarjeta-acceso {
    border-left: 4px solid var(--gruas-acento, var(--gruas-naranja));
    transition: transform .15s ease, box-shadow .15s ease;
}

.tarjeta-acceso:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
}

.tarjeta-acceso__icono {
    color: var(--gruas-acento, var(--gruas-naranja));
}

/* El acento se fija una vez por tarjeta y de ahí lo heredan borde e ícono. */
.tarjeta-acceso--naranja { --gruas-acento: var(--gruas-naranja); }
.tarjeta-acceso--ambar   { --gruas-acento: var(--gruas-ambar); }
.tarjeta-acceso--oro     { --gruas-acento: var(--gruas-oro); }

/* --------------------------------------------------- menú lateral ---
 * Botón hamburguesa + estado encogido. Ver resources/views/components/
 * boton-menu.blade.php y public/js/orchid-sidebar.js.
 */

:root {
    --sidebar-mini-ancho: 4.75rem;
}

.boton-menu-fila {
    padding: .25rem 0 .5rem;
}

/*
 * El botón se comporta como un elemento más del menú: mismo padding-inline que
 * .nav-link (1rem, que en esta base de 15.2px son los 15.2px que Bootstrap le
 * da), de modo que su icono cae exactamente en el mismo eje vertical que los
 * iconos de abajo. Centrado dentro de un cuadrado quedaba 10px a la izquierda y
 * por eso se veía fuera de sitio.
 *
 * Al ir en la misma regla que los .nav-link en el estado encogido, se centra
 * junto con ellos sin tratamiento aparte.
 */
.boton-menu {
    display: flex;
    align-items: center;
    /* La fila es un contenedor flex: sin esto el botón se encoge a su contenido
       y, encogida la barra, el icono no queda en el centro del riel. */
    width: 100%;
    padding: .4rem 1rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.boton-menu:hover,
.boton-menu:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.boton-menu__icono {
    flex: 0 0 auto;
}

/*
 * Iconos del menú, con un color por grupo (ver PlatformProvider::acento()).
 * Sólo se pinta el icono: la etiqueta se queda en el gris de Orchid para no
 * pelearse con el estado activo ni perder contraste sobre el fondo oscuro.
 */
.aside .menu-acento-naranja > svg { color: var(--gruas-naranja); }
.aside .menu-acento-ambar > svg   { color: var(--gruas-ambar); }
.aside .menu-acento-oro > svg     { color: var(--gruas-oro); }

/* --- estado encogido --- */

body.sidebar-mini .aside {
    flex: 0 0 var(--sidebar-mini-ancho);
    width: var(--sidebar-mini-ancho);
    max-width: var(--sidebar-mini-ancho);
}

/*
 * El área de trabajo va fijada a col-lg-9/col-xl-9, así que hay que soltarla o
 * queda un hueco donde estaba la barra. El selector de hermano posterior evita
 * depender de la lista exacta de clases que Orchid le ponga.
 */
body.sidebar-mini .aside ~ [class*="col-"] {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
}

/* Todo lo que es texto se va; quedan los iconos. */
body.sidebar-mini .aside .nav-item > a > span,
body.sidebar-mini .aside .nav-item > a > .badge,
body.sidebar-mini .aside .nav-item > small,
body.sidebar-mini .aside .header-brand p,
body.sidebar-mini .aside .scroll-to-top,
body.sidebar-mini .aside .profile-container small,
body.sidebar-mini .aside .input-icon {
    display: none !important;
}

body.sidebar-mini .aside .nav-item > a,
body.sidebar-mini .boton-menu,
body.sidebar-mini .aside .profile-container > a {
    justify-content: center;
    padding-left: .5rem;
    padding-right: .5rem;
}

body.sidebar-mini .aside header {
    justify-content: center;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

/*
 * Sin el nombre de la aplicación la cabecera queda vacía y se pierde el enlace
 * a Inicio. Orchid ya trae ahí un icono de casa marcado `d-lg-none` (sólo
 * móvil); encogidos estamos en la misma situación, así que se rescata.
 */
body.sidebar-mini .aside .header-brand .d-lg-none {
    display: inline-block !important;
}

/*
 * El avatar (40px) y la campana (29px) no caben lado a lado en 72px. En vez de
 * esconder las notificaciones, se apilan.
 */
body.sidebar-mini .aside .profile-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

body.sidebar-mini .aside .profile-container > a {
    width: auto;
    flex: 0 0 auto;
}

/* --------------------------------------------------- barra de filtros ---
 * Ver App\Orchid\Layouts\FiltrosBase y platform/layouts/filtros.blade.php.
 */

/*
 * El botón lleva el texto en gris y deja el naranja sólo para el icono y el
 * contador. Con la etiqueta, el icono y la píldora los tres en naranja fuerte,
 * la barra pesaba más que la tabla que encabeza.
 */
.barra-filtros__boton {
    border: 0;
    background: transparent;
    padding: .25rem .25rem .25rem 0;
    color: #495057;
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease;
}

.barra-filtros__boton:hover,
.barra-filtros__boton[aria-expanded="true"] {
    color: var(--gruas-naranja);
}

/* Único acento en reposo, y algo apagado respecto al naranja de la marca. */
.barra-filtros__icono {
    color: var(--gruas-naranja);
    opacity: .75;
}

.barra-filtros__boton:hover .barra-filtros__icono,
.barra-filtros__boton[aria-expanded="true"] .barra-filtros__icono {
    opacity: 1;
}

/*
 * Cuántos filtros hay puestos, para no tener que abrir el desplegable.
 * Relleno tenue con texto oscuro en vez de naranja sólido con texto blanco:
 * se sigue leyendo pero deja de competir con el resto de la pantalla.
 */
.barra-filtros__cuenta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(255, 120, 0, .14);
    color: #8a4b00;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

/* La flecha gira cuando el panel está abierto. */
.barra-filtros__flecha {
    transition: transform .2s ease;
    opacity: .5;
}

.barra-filtros__boton[aria-expanded="true"] .barra-filtros__flecha {
    transform: rotate(180deg);
    opacity: 1;
}

/*
 * Los campos a todo lo ancho y en rejilla. Con once filtros, el desplegable de
 * una sola columna que trae Orchid obligaba a rebuscar; aquí caben cuatro por
 * fila y se ven todos de golpe.
 */
.barra-filtros__panel {
    border-top: 1px solid rgba(0, 0, 0, .07);
    padding-top: 1rem;
}

.barra-filtros__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .85rem 1.25rem;
}

.barra-filtros__campos > .form-group {
    margin-bottom: 0;
}

.barra-filtros__aplicar {
    background: var(--gruas-naranja);
    border-color: var(--gruas-naranja);
    color: #fff;
}

.barra-filtros__aplicar:hover,
.barra-filtros__aplicar:focus {
    background: var(--gruas-ambar);
    border-color: var(--gruas-ambar);
    color: #fff;
}

/* Cada filtro puesto, con su aspa para quitarlo. */
.barra-filtros__etiqueta {
    padding: .15rem .5rem;
    border: 1px solid rgba(255, 120, 0, .35);
    border-radius: 999px;
    background: rgba(255, 192, 0, .12);
    color: #8a4b00;
    font-size: .8125rem;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.barra-filtros__etiqueta:hover {
    background: rgba(255, 120, 0, .18);
    border-color: var(--gruas-naranja);
    color: #6b3a00;
}

/* ------------------------------------------------------------ tablas ---
 * Orchid marca cada celda con data-column="<slug>", así que se puede estilar
 * una columna concreta sin tocar PHP y sin depender de nth-child, que se
 * rompería en cuanto el usuario oculte una columna desde el menú de la tabla.
 *
 * OJO: el slug lo genera Str::slug($name), o sea minúsculas y guion medio.
 * `fecha_captura` llega como "fecha-captura" e `importeAux` como "importeaux";
 * escribirlos como están en PHP no casa con nada y falla en silencio.
 */

/* Fechas y horas: partirlas a media palabra ("19/08/2 026") las vuelve
   ilegibles, y son las columnas por las que se ordena la lista. */
[data-column="fecha-captura"],
[data-column="tiempo-proceso"],
[data-column="tiempo-contacto"],
[data-column="tiempo-terminado"],
[data-column="diferencia-tiempo"],
[data-column="estado"],
[data-column="pago"],
[data-column="placas"] {
    white-space: nowrap;
}

/*
 * Dígitos de ancho fijo, para que las unidades queden en columna y las cifras
 * se puedan comparar de un vistazo.
 *
 * La alineación a la derecha NO va aquí: Orchid pone la clase .text-start de
 * Bootstrap, que lleva !important y gana. Eso se resuelve con ->alignRight()
 * en el TD, que es para lo que existe.
 */
[data-column="importeaux"],
[data-column="importe-total"] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* La fila de totales que devuelve total(): se despega del cuerpo. */
.table tbody tr:last-child td.tabla-total {
    border-top: 2px solid rgba(0, 0, 0, .15);
    font-weight: 600;
    background: #fff;
}

/* ------------------------------------------- secciones de formulario ---
 * Ver App\Orchid\Layouts\SeccionRows y platform/layouts/seccion.blade.php.
 */

/*
 * El relleno lateral es 1.5rem, el mismo que Orchid usa en sus tarjetas (.p-4),
 * para que estas secciones respiren igual que el resto del panel. La línea
 * divisoria sí va de borde a borde: al ser un borde del <section>, abarca la
 * caja completa y no se recorta con el relleno.
 */
.form-seccion {
    padding: 1.25rem 1.5rem;
}

/* Sólo entre secciones: la primera no lleva línea arriba. */
.form-seccion + .form-seccion {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.form-seccion__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.15rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6c757d;
}

.form-seccion__punto {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--gruas-acento, var(--gruas-naranja));
}

.form-seccion--naranja { --gruas-acento: var(--gruas-naranja); }
.form-seccion--ambar   { --gruas-acento: var(--gruas-ambar); }
.form-seccion--oro     { --gruas-acento: var(--gruas-oro); }

/*
 * auto-fit reparte los campos en las columnas que quepan y colapsa las vacías,
 * así una sección de un solo campo (el comentario) ocupa todo el ancho sin
 * necesidad de marcarla aparte.
 */
.form-seccion__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem 1.5rem;
}

/*
 * El espacio entre filas lo pone el row-gap de la rejilla. El margen que Orchid
 * trae en .form-group hay que anularlo o desnivela la fila: en una fila de dos
 * campos sólo el último perdería el margen y el otro empujaría de más.
 */
.form-seccion__campos > .form-group {
    margin-bottom: 0;
}

/*
 * Orchid le pone max-width: 600px a los textarea por legibilidad. Dentro de una
 * sección eso descuadra: el encabezado va a todo lo ancho y el campo se queda
 * corto. Se levanta sólo aquí, sin tocar los textarea del resto del panel.
 */
.form-seccion__campos textarea {
    max-width: 100%;
}

/* ------------------------------------------------- tarjetas de métrica ---
 * El layout de métricas es de Orchid y no admite clases propias, así que se
 * marca su envoltura (ver platform/partials/metrics-accent.blade.php) y se
 * cicla la paleta por posición.
 */
[data-metric-accent] .col > .bg-white {
    border-top: 3px solid var(--gruas-acento);
}

[data-metric-accent] .col:nth-child(3n + 1) > .bg-white { --gruas-acento: var(--gruas-naranja); }
[data-metric-accent] .col:nth-child(3n + 2) > .bg-white { --gruas-acento: var(--gruas-ambar); }
[data-metric-accent] .col:nth-child(3n + 3) > .bg-white { --gruas-acento: var(--gruas-oro); }