/* =====================================================================
   TOKENS DE ESTA HOJA

   Las dos aplicaciones NO comparten paleta: starberry es tema oscuro con
   rosa palido, crochetstar es tema claro (fondo crema) con coral. Usar el
   mismo acento en ambas rompe el contraste: el rosa #FFD1DC sobre el crema
   #FFF9D8 da 1.28:1, o sea invisible.

   Por eso todo lo coloreado de esta hoja pasa por estos tokens, y cada app
   define los suyos aqui arriba. El resto del archivo es identico.
   ===================================================================== */
:root {
    /* El coral de marca (#FF9AA2) solo da 1.90:1 sobre el crema, por debajo
       del minimo de 3:1. Se usa una version mas oscura del mismo tono, que
       sigue leyendose como la marca pero alcanza 4.20:1. */
    --ui-acento: #D14652;                    /* 4.20:1 sobre #FFF9D8 */
    --ui-acento-fondo: rgba(209, 70, 82, 0.10);
    --ui-acento-borde: rgba(209, 70, 82, 0.45);
    --ui-acento-fondo-hover: rgba(209, 70, 82, 0.20);
    --ui-peligro: #C42A2A;
    --ui-peligro-fondo: rgba(196, 42, 42, 0.10);
    --ui-peligro-borde: rgba(196, 42, 42, 0.50);
    --ui-peligro-fondo-hover: rgba(196, 42, 42, 0.20);
    --ui-sobre-acento: #fff;
}

/* =====================================================================
   Correcciones de usabilidad y accesibilidad.

   Se carga DESPUES del <style> del layout, así que gana en el cascade
   sin necesidad de !important.

   Casi todo vive dentro de @media (max-width: 900px): el diseño de
   escritorio no se toca. El proyecto no tenía ninguna media query, y con
   `body { overflow: hidden }` más una barra lateral fija de 260px, en un
   teléfono de 375px la barra ocupaba el 70% del ancho y el contenido
   quedaba inalcanzable porque el body no dejaba desplazar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Salto al contenido: con 10 enlaces en la barra lateral, quien navega
   con teclado tenía que tabular por todos ellos en cada página.
   Solo aparece al recibir foco.
   --------------------------------------------------------------------- */
.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--ui-acento);
    color: var(--ui-sobre-acento);
    font-weight: 700;
    border-radius: 0 0 12px 0;
    text-decoration: none;
}

.salto-contenido:focus {
    left: 0;
}

/* ---------------------------------------------------------------------
   Foco visible en TODO elemento interactivo.

   Los inputs ya se corrigieron uno a uno, pero enlaces y botones
   dependían del contorno por defecto del navegador, que sobre un fondo
   casi negro apenas se distingue.

   :focus-visible en vez de :focus para que el anillo salga al navegar
   con teclado y no en cada clic de ratón.
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ui-acento);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------
   El anillo de foco debe aparecer al instante.

   El layout aplica `transition: all 0.3s` a casi todo, y eso incluye el
   contorno: al tabular rápido entre campos, el anillo llegaba con 300 ms
   de retraso y se veía perseguir al cursor. Un indicador de foco es
   información, no decoración, así que no se anima.
   --------------------------------------------------------------------- */
*:focus-visible {
    transition-duration: 0s;
}

/* ---------------------------------------------------------------------
   Áreas táctiles: mínimo 44x44 px.
   --------------------------------------------------------------------- */
.nav-item a,
button,
input[type="submit"],
.btn,
.btn-cancel {
    min-height: 44px;
}

/* ---------------------------------------------------------------------
   Respeta a quien pide menos movimiento en su sistema.
   El layout anima cada cambio de página y usa transition: all 0.3s.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   MÓVIL Y TABLET
   ===================================================================== */
@media (max-width: 900px) {

    /* La barra lateral pasa a ser una barra superior horizontal.
       Sin JavaScript ni menú hamburguesa: los 10 destinos siguen
       accesibles deslizando, y no hay estado que se pueda quedar
       abierto por error. */
    /* `html body` en vez de `body` a proposito.
       20 vistas repiten en su propio <style> el mismo bloque que el layout:
       `body { height: 100vh; width: 100vw; overflow: hidden }`. Ese <style>
       va dentro del <body>, o sea despues de esta hoja, asi que a igualdad
       de especificidad ganaba la vista: el contenido medía 2418 px, el body
       quedaba clavado en 844 y con overflow hidden, y la pagina no se podia
       deslizar. Con `html body` (0,0,2) manda esta regla sin !important.

       width tambien pasa a 100%: 100vw incluye el ancho de la barra de
       desplazamiento y provoca un desborde horizontal de unos pocos pixeles. */
    html body {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        width: 100%;
        overflow: visible;          /* antes: hidden -> no se podía desplazar */
    }

    /* Los contenedores intermedios tambien se clavaban al alto de pantalla */
    html body .main-wrapper {
        height: auto;
        overflow: visible;
    }

    html body .content-area {
        overflow: visible;
    }

    .sidebar {
        width: 100%;
        min-width: 0;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-right: none;
        border-bottom: 1px solid var(--border, #6b6b75);
        position: sticky;
        top: 0;
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        margin: 0;
        border-bottom: none;
        flex-shrink: 0;
    }

    .sidebar-logo {
        width: 38px;
        height: 38px;
        margin: 0;
        border-radius: 10px;
    }

    .sidebar-title {
        font-size: 1rem;
        white-space: nowrap;
    }

    .nav-menu {
        display: flex;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-grow: 1;
        -webkit-overflow-scrolling: touch;
        /* La franja se sigue desplazando igual: esto solo oculta el
           indicador visual de la barra, no el scroll en si. */
        scrollbar-width: none;      /* Firefox */
        -ms-overflow-style: none;   /* versiones viejas de Edge */
    }

    .nav-menu::-webkit-scrollbar {
        display: none;              /* Chrome, Safari, Edge actual */
    }

    .nav-item {
        flex-shrink: 0;
    }

    .nav-item a {
        white-space: nowrap;
        margin-bottom: 0;
        padding: 10px 14px;
    }

    .main-wrapper {
        height: auto;
        overflow: visible;
    }

    .content-area {
        padding: 16px;
        overflow: visible;
    }

    /* Cabecera de pagina: el titulo y el boton competian por el ancho y el
       boton acababa partido en cuatro lineas. Apilados, cada uno ocupa su
       linea completa. El selector `> div` alcanza los envoltorios que
       llevan el flex en un atributo style. */
    .header-flex,
    .header-section,
    .titulo-estado,
    .action-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .header-flex > div,
    .header-section > div,
    .action-bar > div {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    /* Filtros: el desplegable de categorias se salia del contenedor. */
    .filter-group,
    .search-bar,
    form.filter-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .filter-group input,
    .filter-group select,
    .search-bar input,
    .search-bar select {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Estas tarjetas llevan padding grueso (20-24 px) y borde sin
       box-sizing, asi que se pasaban entre 12 y 18 px del ancho util. */
    .stat-card,
    .search-bar,
    .filter-group,
    .report-section,
    .withdraw-section,
    [class*="card"] {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Botones que encabezan una seccion: a lo ancho, no al 60 % */
    .header-flex > div > a[class*="btn"],
    .header-section > div > a[class*="btn"],
    .search-bar > a[class*="btn"] {
        width: 100%;
        box-sizing: border-box;
    }

    /* Varias cabeceras declaran `display:flex; align-items:center` en un
       atributo style, no en una clase. Un atributo style solo puede
       sobrescribirse con !important: no hay forma de ganarle desde una hoja
       externa. Sin esto el boton se quedaba al 60 % y con el texto partido
       en cuatro lineas. */
    .content-area [style*="display: flex"][style*="space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .content-area [style*="display: flex"][style*="space-between"] > div,
    .content-area [style*="display: flex"][style*="space-between"] > a {
        width: 100%;
        box-sizing: border-box;
    }

    .content-area [style*="display: flex"][style*="space-between"] a[class*="btn"] {
        width: 100%;
    }

    /* Rejillas fijas de dos columnas a una sola.
       Sin esto, en Informes cada columna se quedaba en 148 px de los 390
       disponibles y las tablas de dentro salian comprimidas a 96 px: por eso
       una fila de dos celdas cortas medía 315 px de alto. */
    .form-grid,
    .edit-card .form-grid,
    .image-manager,
    .report-grid,
    .partner-split {
        grid-template-columns: 1fr;
    }

    .full-width {
        grid-column: span 1 !important;
    }
}

/* Teléfonos estrechos: el título de la marca estorba más de lo que aporta */
@media (max-width: 480px) {
    .sidebar-title {
        display: none;
    }

    .content-area {
        padding: 12px;
    }
}

/* =====================================================================
   SISTEMA DE BOTONES

   El proyecto acumulaba unas 30 clases distintas (.btn-add, .btn-save,
   .delete-link, .actions a, .btn-accion...), cada vista inventando la
   suya. Esto no las renombra —eso obligaría a tocar las 44 vistas— sino
   que les impone un suelo común de tamaño y apariencia.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Suelo táctil para cualquier control.
   Medido en producción: los enlaces "Editar" y "Borrar" de los listados
   eran de 73x27 px. La guía pide 44x44 como mínimo; con 27 px de alto
   fallar el toque es lo normal, no la excepción.
   --------------------------------------------------------------------- */
a[class*="btn"],
button,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
}

/* Los enlaces con aspecto de boton (.btn-back, .btn-add, .btn-link...) son
   <a>, no <button>: min-height les da la altura de caja, pero el texto se
   queda pegado arriba y el area pulsable no coincide con lo que se ve.
   inline-flex lo centra. Medido en produccion: "Cancelar y volver" pasaba
   de 17 px de alto a 44 px. */
body a[class*="btn"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   Acciones dentro de listados y tablas.

   Iban sin fondo ni borde: eran texto de color, no botones. Ahora tienen
   superficie propia, se leen como pulsables y alcanzan el área táctil.

   Los selectores llevan `body` delante a propósito. Cada vista trae su
   propio <style> dentro del <body>, es decir DESPUÉS de este archivo, así
   que a igualdad de especificidad ganaba la vista y su `padding: 5px 10px`
   se imponía. Con `body` por delante la especificidad sube lo justo para
   que mande esta hoja, sin recurrir a !important.
   --------------------------------------------------------------------- */
body .actions a,
body .actions-links a,
body .actions-row a,
body a.delete-link,
body a.delete,
body a.btn-accion,
body a.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--ui-acento-fondo);
    border: 1px solid var(--ui-acento-borde);
    text-decoration: none;
}

body .actions a:hover,
body .actions-links a:hover,
body .actions-row a:hover,
body a.btn-accion:hover,
body a.btn-action:hover {
    background: var(--ui-acento-fondo-hover);
    border-color: var(--ui-acento);
}

/* ---------------------------------------------------------------------
   Acciones destructivas.

   Antes solo se distinguían de "Editar" por el color del texto, y apoyar
   un significado únicamente en el color es un antipatrón: quien no
   distingue rojo de rosa veía dos botones idénticos, uno de ellos capaz
   de borrar un registro. Ahora cambian también fondo y borde.
   --------------------------------------------------------------------- */
body a.delete,
body a.delete-link,
body .actions a.delete,
body a[class*="btn"][class*="delete"],
body button[class*="delete"] {
    background: var(--ui-peligro-fondo);
    border: 1px solid var(--ui-peligro-borde);
    color: var(--ui-peligro);
}

body a.delete:hover,
body a.delete-link:hover,
body .actions a.delete:hover,
body button[class*="delete"]:hover {
    background: var(--ui-peligro-fondo-hover);
    border-color: var(--ui-peligro);
}

/* Separación entre acciones contiguas: evita pulsar "Borrar" queriendo
   pulsar "Editar". La guía pide 8 px como mínimo. */
body .actions,
body .actions-links,
body .actions-row,
body .footer-actions,
body .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ---------------------------------------------------------------------
   En móvil los botones ocupan el ancho disponible: son más fáciles de
   acertar y evitan filas de botones diminutos apretados.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    .btn-add,
    .btn-submit,
    .btn-save,
    .btn-update,
    .btn-generate,
    .btn-confirm,
    input[type="submit"] {
        width: 100%;
    }

    .actions,
    .actions-links,
    .actions-row {
        gap: 8px;
    }

    /* Dentro de una tabla se quedan en línea: si ocuparan el ancho
       completo romperían la celda. */
    td .actions a,
    td .actions-links a {
        padding: 10px 14px;
    }
}


/* =====================================================================
   ICONOS

   Sustituyen a los 82 emoji que habia por el proyecto. Un emoji se dibuja
   distinto en cada sistema operativo, no se puede colorear y el lector de
   pantalla lo lee en voz alta. Estos son SVG de trazo con currentColor,
   asi que basta con darles color aqui.
   ===================================================================== */
.icono {
    flex-shrink: 0;
    vertical-align: -0.18em;   /* apoyado en la linea base del texto */
    color: var(--ui-acento);
}

/* En el menu el icono va separado de su texto */
.nav-item a {
    gap: 10px;
}

.nav-texto {
    min-width: 0;
}

/* El chip activo del menu tiene el acento de fondo: ahi el icono cambia a
   la tinta de contraste, si no quedaria acento sobre acento. */
.nav-item a.active .icono {
    color: var(--ui-sobre-acento);
}

/* En un boton relleno con el acento pasa lo mismo. */
.btn-add .icono,
.btn-submit .icono,
.btn-confirm .icono,
.btn-save .icono {
    color: inherit;
}


/* =====================================================================
   TABLAS EN MOVIL

   Las 23 tablas del proyecto tienen entre 2 y 7 columnas. Medido en
   produccion a 390 px, el listado de productos ocupaba 857 px reales
   contra 326 visibles: habia que arrastrar 531 px en horizontal para leer
   una sola fila, y cada fila medía 214 px de alto.

   Aqui cada fila se convierte en una tarjeta y cada celda en una linea
   "etiqueta: valor". La etiqueta sale del atributo data-label, que se
   rellena con el texto del <thead> de esa misma tabla.

   Nota: cambiar el display de una tabla le quita su semantica de tabla en
   el arbol de accesibilidad. Es el compromiso conocido de este patron, y
   preferible a obligar a arrastrar 531 px para leer una fila.
   ===================================================================== */
@media (max-width: 768px) {

    body table,
    body tbody,
    body tr,
    body td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* La cabecera ya no hace falta: cada celda lleva la suya. */
    body thead {
        display: none;
    }

    body tr {
        border: 1px solid var(--border, #6b6b75);
        border-radius: 14px;
        padding: 6px 14px;
        margin-bottom: 12px;
    }

    body td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 7px 0;
        border: none;
        text-align: right;
        white-space: normal;   /* antes nowrap: los nombres largos se cortaban */
        word-break: break-word;
    }

    body td + td {
        border-top: 1px solid var(--ui-acento-borde);
    }

    body td::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-dim, #a0a0a8);
    }

    /* Celdas sin etiqueta (estados vacios con colspan) ocupan la tarjeta */
    body td:not([data-label])::before {
        content: none;
    }

    body td:not([data-label]) {
        justify-content: center;
        text-align: center;
    }

    /* Acciones: la etiqueta ocupa su propia linea y los botones se reparten
       el ancho en horizontal. Apilados en vertical la celda medía 200 px y
       disparaba la fila entera a 595 px; asi baja a 104 px. */
    body td[data-label="Acciones"] {
        /* El layout define `.actions { flex-direction: column }` pensando en
           los botones de un formulario, pero esa regla alcanza tambien al
           <td class="actions"> de las tablas: Editar y Borrar salian uno
           encima del otro y la celda se iba a 177 px. */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        margin-top: 0;
    }

    body td[data-label="Acciones"]::before {
        width: 100%;
    }

    body td[data-label="Acciones"] > a,
    td[data-label="Acciones"] .actions a,
    td[data-label="Acciones"] .actions-links a {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 8px;
    }

    /* Las imagenes de producto ocupaban casi la mitad del alto de la fila */
    body td img {
        max-width: 56px;
        height: auto;
    }
}