/* app.css — Gestión de compras. Va DESPUÉS de tokens.css y oses-apps.css (plantilla corporativa, que no se toca).
   Aquí solo está lo que la maqueta de la app pide y la plantilla no trae; todo sale de los tokens, sin colores nuevos. */

/* Cabecera en dos filas, como la maqueta: marca y usuario arriba, familias debajo a la izquierda.
   La plantilla ya lo hace por debajo de 1480 px; aquí es así a cualquier ancho. */
body.armazon header{flex-wrap:wrap;column-gap:16px;row-gap:0}
body.armazon header .brand{flex:1 1 0}
body.armazon nav.tabs{order:3;margin-left:0;flex:1 0 100%;border-top:1px solid rgba(255,255,255,.14)}
body.armazon nav.tabs button{padding:10px 14px 8px}
nav.tabs button:disabled{cursor:default;color:rgba(255,255,255,.5)}

/* Versión en la cabecera, con la marca naranja de la maqueta, y Salir como formulario (POST con CSRF). */
header .user form{margin:0}
header .user .ver::before{content:"";display:inline-block;width:7px;height:7px;border-radius:var(--radius-pildora);background:var(--accent);margin-right:6px;vertical-align:1px}
header .user #enlaces{display:flex;gap:10px}
header .user #enlaces:empty{display:none}

/* Navegación de módulos de la familia: fila blanca bajo la cabecera. Azul = el elegido; subrayado naranja = pestaña activa. */
.modulos{display:flex;gap:2px;padding:0 var(--space-main);background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto;overflow-x:auto;scrollbar-width:none}
.modulos::-webkit-scrollbar{display:none}
.modulos button{background:transparent;border:0;border-bottom:3px solid transparent;color:var(--muted);padding:10px 12px 7px;font-weight:500;white-space:nowrap}
.modulos button:hover{color:var(--ink)}
.modulos button[aria-selected="true"]{color:var(--primary);border-bottom-color:var(--accent)}
.modulos button .n{display:inline-block;margin-left:6px;font-size:var(--fs-contador);padding:1px 6px;border-radius:var(--radius-pildora);background:var(--bg);color:var(--muted)}

/* Avisos de configuración (solo los ve IT). */
.avisos{background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-pequeno);padding:6px var(--space-main);border-bottom:1px solid var(--line);flex:0 0 auto}
.avisos div+div{margin-top:2px}

/* Acceso: el botón es lo único del formulario; el texto de ayuda, a su ancho. */
.login p{margin:0}

/* Páginas secundarias: secciones, barra de filtros dentro del contenido y tablas con filas que no abren ficha. */
.aud h2{margin:0 0 4px;font-size:var(--fs-titulo-ficha)}
.aud h2:not(:first-child){margin-top:28px}
.aud>p{margin:0 0 12px;color:var(--muted);max-width:80ch}
.aud .toolbar{padding:8px 0;border-bottom:0;background:transparent}
.aud .toolbar select,.aud .toolbar input{padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--panel);font-size:var(--fs-control)}
.aud table{border:1px solid var(--line);border-radius:var(--radius-caja);background:var(--panel)}
.aud thead th{cursor:default;position:static}
.aud tbody tr.fija{cursor:default}
.aud tbody td{white-space:normal}
.aud .mas{display:block;margin:12px auto 0;border:1px solid var(--line-strong);background:var(--panel);border-radius:var(--radius-control);padding:6px 12px}
.drawer pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}

.aud .mas[hidden]{display:none}

/* Administración de usuarios: líneas «rol + familia» y contraseña provisional (se enseña una vez, fácil de copiar). */
.ficha .rol{margin-bottom:6px}
.drawer .clave{font-family:Consolas,"Courier New",monospace;font-size:var(--fs-titulo-ficha);user-select:all}
.login .notice a{color:var(--primary)}
.drawer dl+.acciones{margin-top:14px}

/* Lateral de facetas: oculto en los módulos que aún no lo usan. */
aside[hidden]{display:none}

/* Ficha lateral ancha (importaciones y listas dentro de la ficha), como los paneles anchos de la maqueta. */
.drawer.ancha{width:min(760px,100%)}
.drawer textarea{display:block;width:100%;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--panel);font:inherit;color:inherit;margin:0 0 12px;resize:vertical}
.drawer .err{color:var(--danger);font-size:var(--fs-pequeno);min-height:1em;margin:0 0 8px}

/* Tabla pequeña dentro de la ficha (códigos por talla, propuesta de importación): no abre nada y no fija la cabecera. */
table.mini{width:100%;min-width:0;font-size:var(--fs-control)}
table.mini thead th{position:static;cursor:default;padding:6px 8px}
table.mini thead th.num{text-align:right}
table.mini tbody td{padding:5px 8px;white-space:normal;max-width:none}
table.mini tbody tr{cursor:default}
table.mini tbody tr:hover td{background:transparent}
table.mini tbody tr.zero{opacity:.45}
table.mini input:not([type=checkbox]){width:100%;min-width:52px;padding:4px 6px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--panel)}
.ficha .ancho{grid-column:1/-1;overflow-x:auto}

/* Enlace con aspecto de botón dentro de la ficha (abrir el justificante en otra pestaña). */
.acciones a.boton{background:var(--primary);color:var(--on-primary);border-radius:var(--radius-control);padding:7px 12px;text-decoration:none}

/* Líneas de una entrega o de un pedido dentro de la ficha: artículo, cantidad y su campo propio. */
.lineas table.mini td:first-child{width:55%}
.lineas table.mini td:nth-child(2){width:64px}
.lineas table.mini td.num{white-space:nowrap}
.lineas .quitar{border:0;background:transparent;color:var(--muted);font-size:var(--fs-titulo-ficha);line-height:1;padding:0 4px}
.lineas .quitar:hover{color:var(--danger)}
.lineas .mas-linea{margin-top:8px;border:1px solid var(--line-strong);background:var(--panel);border-radius:var(--radius-control);padding:5px 10px;font-size:var(--fs-control)}
.drawer form:not(.ficha) .err{color:var(--danger);font-size:var(--fs-pequeno);min-height:1em;margin:8px 0}
.drawer .ficha+textarea,.drawer div.ficha{margin-bottom:12px}

/* Informes: la barra para elegir informe y, debajo, la vista de datos con su propia tabla desplazable. */
.sub-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* Panel: tarjetas con las listas que piden atención. */
.pies.panel .chart{min-height:160px}
.pies.panel table.mini td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}

/* Justificante de entrega: una hoja para imprimir y firmar. */
.justificante{max-width:820px}
.justificante dl{display:grid;grid-template-columns:170px 1fr;gap:4px 12px;margin:12px 0 16px}
.justificante dt{color:var(--muted)}
.justificante dd{margin:0}
.justificante table{width:100%;margin-bottom:16px}
.justificante .anulada{color:var(--danger);font-weight:600}
.justificante .firmas{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:72px}
.justificante .firmas .linea{border-top:1px solid var(--ink);margin-bottom:6px}
@media print{
  .justificante .toolbar{display:none}
  body.pagina-sec header{background:transparent;color:var(--ink)}
  body.pagina-sec header img{content:url(/logo-oses.svg)}
}