:root {
    --petroleo: #0E2733;
    --capa: #133443;
    --lino: #F6F3EC;
    --tinta: #1D2B33;
    --tenue: #5E727B;
    --linea: #DCD6CA;
    --laton: #B8862B;
    --laton-claro: #D4A64A;
    --ok: #2E9E6A;
    --error: #C8472F;
    --texto: 'Barlow', 'Segoe UI', Roboto, Arial, sans-serif;
    --cifras: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--lino); color: var(--tinta); font-family: var(--texto); font-size: 15px; line-height: 1.45; }
a { color: var(--petroleo); }

/* Barra superior */
.top { background: var(--petroleo); color: #EFEAE0; display: flex; align-items: center; flex-wrap: wrap; padding: 0 16px; min-height: 56px; position: relative; z-index: 20; }
.logo { font-family: var(--cifras); font-weight: 600; font-size: 21px; color: #EFEAE0; text-decoration: none; margin-right: 22px; padding: 12px 0; }
.menu-t { display: none; }
.menu-b { display: none; margin-left: auto; font-size: 26px; cursor: pointer; padding: 6px 10px; color: #EFEAE0; }
.nav { display: flex; align-items: stretch; flex: 1; }
.nav details { position: relative; }
.nav summary, .nav-link { list-style: none; cursor: pointer; padding: 17px 13px; color: #EFEAE0; text-decoration: none; display: block; user-select: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary:after { content: ' \25BE'; color: var(--laton-claro); }
.nav details[open] summary, .nav summary:hover, .nav-link:hover { background: var(--capa); }
.nav .sub { position: absolute; top: 100%; left: 0; background: #fff; min-width: 240px; border: 1px solid var(--linea); box-shadow: 0 10px 28px rgba(14, 39, 51, .16); padding: 6px 0; }
.nav .sub a { display: block; padding: 10px 16px; color: var(--tinta); text-decoration: none; }
.nav .sub a:hover, .nav .sub a.activo { background: var(--lino); }
.nav .sub a.activo { border-left: 3px solid var(--laton); padding-left: 13px; }
.cuenta { display: flex; align-items: center; font-size: 14px; color: #C9D4D8; }
.cuenta > * { margin-left: 14px; }
.cuenta a { color: var(--laton-claro); }
.cuenta-empresa { color: #EFEAE0; font-weight: 600; }
.selector-empresa select { background: var(--capa); color: #EFEAE0; border: 1px solid rgba(239, 234, 224, .25); border-radius: 4px; padding: 6px 8px; font: inherit; max-width: 220px; }

@media (max-width: 900px) {
    .menu-b { display: block; }
    .nav, .cuenta { display: none; width: 100%; flex-direction: column; align-items: stretch; }
    .menu-t:checked ~ .nav, .menu-t:checked ~ .cuenta { display: flex; }
    .nav .sub { position: static; box-shadow: none; border: 0; background: var(--capa); min-width: 0; }
    .nav .sub a { color: #EFEAE0; padding-left: 30px; }
    .nav .sub a:hover, .nav .sub a.activo { background: rgba(239, 234, 224, .08); }
    .cuenta { padding: 8px 0 16px; border-top: 1px solid rgba(239, 234, 224, .15); }
    .cuenta > * { margin: 6px 0; }
    .selector-empresa select { max-width: none; width: 100%; }
}

/* Contenido */
.contenido { max-width: 1240px; margin: 0 auto; padding: 26px 16px 56px; }
h1 { font-family: var(--cifras); font-weight: 600; font-size: 32px; line-height: 1.1; margin-bottom: 6px; }
h2 { font-family: var(--cifras); font-weight: 600; font-size: 22px; margin-bottom: 10px; }
.sub-t { color: var(--tenue); margin-bottom: 22px; }
.caja { background: #fff; border: 1px solid var(--linea); border-radius: 6px; padding: 20px; margin-bottom: 20px; }
.flash { padding: 11px 14px; border-radius: 4px; margin-bottom: 16px; border-left: 4px solid; }
.flash.ok { background: #E3F4EA; color: #1D5E3E; border-color: var(--ok); }
.flash.error { background: #FBE5E0; color: #7A2A1B; border-color: var(--error); }
.nota { font-size: 13px; color: var(--tenue); margin-top: 6px; }
.fila-titulo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.fila-titulo > * { margin-bottom: 6px; }

/* Formularios */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-gap: 16px 20px; }
.form-grid .ancho { grid-column: 1 / -1; }
label { display: block; font-size: 13px; color: var(--tenue); margin-bottom: 4px; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=url], select, textarea {
    width: 100%; padding: 9px 10px; border: 1px solid var(--linea); border-radius: 4px; font: inherit; background: #fff; color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--laton-claro); outline-offset: 0; border-color: var(--laton-claro); }
.check { display: flex; align-items: center; color: var(--tinta); font-size: 15px; font-weight: 400; cursor: pointer; }
.check input { margin-right: 8px; width: 18px; height: 18px; flex: none; }
.checks { display: flex; flex-wrap: wrap; }
.checks .check { margin: 0 18px 8px 0; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.acciones > * { margin: 0 10px 8px 0; }
.en-linea { display: flex; flex-wrap: wrap; align-items: flex-end; }
.en-linea > * { margin: 0 10px 10px 0; }
.en-linea > div { min-width: 150px; }

.btn { display: inline-block; background: var(--petroleo); color: #fff; border: 1px solid var(--petroleo); border-radius: 4px; padding: 9px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.3; }
.btn:hover { background: var(--capa); }
.btn.sec { background: #fff; color: var(--petroleo); }
.btn.sec:hover { background: var(--lino); }
.btn.peligro { background: #fff; color: var(--error); border-color: var(--error); }
.btn.mini { padding: 4px 10px; font-size: 13px; font-weight: 500; }
form.inline { display: inline; }

/* Tablas */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linea); border-radius: 6px; background: #fff; margin-bottom: 20px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border-bottom: 1px solid var(--linea); padding: 8px 10px; text-align: left; vertical-align: middle; }
th { background: #F1EDE4; font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.acc { white-space: nowrap; text-align: right; }
tr.nc td { color: var(--error); }
tr.tot td { background: #FAF8F3; font-weight: 600; }
tr.pen td { background: #E8F4EA; }
tr.general td { background: #CFE8D4; font-size: 15px; }
.estado { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.estado.si { background: #E3F4EA; color: #1D5E3E; }
.estado.no { background: #ECECEC; color: #666; }
.rol { font-size: 12px; color: var(--tenue); }

/* Inicio */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); grid-gap: 20px; }
.tile { background: #fff; border: 1px solid var(--linea); border-top: 5px solid var(--petroleo); border-radius: 6px; padding: 22px; }
.tile.pedidos { border-top-color: var(--laton-claro); }
.tile h2 { font-size: 28px; margin-bottom: 4px; }
.tile p { color: var(--tenue); margin-bottom: 16px; }
.tile ul { list-style: none; }
.tile li { margin-bottom: 8px; }
.tile li a { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border: 1px solid var(--linea); border-radius: 4px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.tile li a:after { content: '\2192'; color: var(--laton); }
.tile li a:hover { border-color: var(--laton-claro); background: var(--lino); }
.tile .pronto { color: var(--tenue); font-style: italic; padding: 13px 0; }

/* Login */
body.desnudo { background: var(--petroleo); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login { background: #fff; border-radius: 8px; padding: 32px 28px; width: 100%; max-width: 390px; }
.login h1 { font-size: 30px; }
.login .sub-t { margin-bottom: 20px; }
.login .campo { margin-bottom: 14px; }
.login .btn { width: 100%; padding: 12px; margin-top: 8px; font-size: 16px; }
.login .flash { margin-bottom: 14px; }

/* Metas */
.metas-tabla input { width: 104px; text-align: right; padding: 6px 7px; }
.metas-tabla td:first-child, .metas-tabla th:first-child { position: -webkit-sticky; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 170px; }
.metas-tabla th:first-child { background: #F1EDE4; }
.metas-tabla tr.fila-empresa td { background: #FAF8F3; }

/* Detalle diario: totales visibles, líneas bajo "Ver más" */
.dia { margin-bottom: 26px; }
.dia .tabla-scroll { margin-bottom: 8px; }
.ver-mas > summary { display: inline-block; list-style: none; cursor: pointer; color: var(--petroleo); font-weight: 600; font-size: 14px; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 4px; background: #fff; margin-bottom: 8px; }
.ver-mas > summary::-webkit-details-marker { display: none; }
.ver-mas > summary:hover { border-color: var(--laton-claro); }
.ver-mas > summary .cerrar, .ver-mas[open] > summary .abrir { display: none; }
.ver-mas[open] > summary .cerrar { display: inline; }
.vacio-det { color: var(--tenue); }