/* Sistema interno — Palacio de la Machucada
   Pensado para el celular: botones grandes, campos amplios, poco scroll. */
:root{
  --negro:#0d0d0d; --dorado:#d9a032; --dorado-claro:#f0c060;
  --verde:#1e6b3c; --verde-osc:#14522c; --verde-claro:#e8f3ec;
  --crema:#f7f6f2; --tinta:#221e18; --gris:#6b6459; --borde:#dcd6ca;
  --blanco:#fff; --rojo:#b3261e; --rojo-claro:#fdecea;
  --amarillo:#8a6d00; --amarillo-claro:#fff6d9;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--crema);color:var(--tinta);line-height:1.55;font-size:16px;
}
a{color:var(--verde)}

/* ---------- barra superior ---------- */
.barra{background:var(--negro);border-bottom:2px solid var(--dorado);position:sticky;top:0;z-index:40}
.barra-int{max-width:1000px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-txt{color:var(--dorado);font-weight:700;text-decoration:none;font-size:1.05rem;letter-spacing:.02em}
.logo-txt span{color:rgba(255,255,255,.6);font-weight:400;font-size:.85rem}
.menu{display:flex;gap:2px;flex-wrap:wrap}
.menu a{color:#fff;text-decoration:none;font-size:.88rem;padding:6px 12px;border-radius:16px}
.menu a:hover{background:rgba(217,160,50,.2)}
.menu a.activo{background:var(--dorado);color:var(--negro);font-weight:600}
.yo{margin-left:auto;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.75);font-size:.82rem}
.salir{color:var(--dorado-claro);text-decoration:none;border:1px solid rgba(217,160,50,.5);padding:4px 12px;border-radius:14px}

/* ---------- contenido ---------- */
.contenido{max-width:1000px;margin:0 auto;padding:20px 14px 50px}
h1{font-size:1.4rem;color:var(--verde-osc);margin-bottom:4px}
h1::after{content:"";display:block;width:46px;height:3px;background:var(--dorado);border-radius:2px;margin-top:6px}
h2{font-size:1.1rem;color:var(--verde-osc);margin:26px 0 10px}
.guia{color:var(--gris);font-size:.92rem;margin-bottom:20px}

/* ---------- tarjetas ---------- */
.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:14px;padding:20px;margin-bottom:18px}
.tarjeta h3{font-size:1rem;color:var(--verde-osc);margin-bottom:12px}

/* ---------- formularios ---------- */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo.ancho{grid-column:1/-1}
label{font-size:.85rem;font-weight:600;color:var(--gris)}
label .ayuda{display:block;font-weight:400;font-size:.78rem;color:var(--gris);opacity:.85}
input,select,textarea{
  font:inherit;padding:11px 12px;border:1px solid var(--borde);border-radius:10px;
  background:var(--blanco);color:var(--tinta);width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde);outline-offset:-1px;border-color:var(--verde)}
input[type=number]{text-align:right}
textarea{min-height:70px;resize:vertical}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
button,.boton{
  font:inherit;font-weight:600;padding:12px 24px;border:none;border-radius:24px;
  cursor:pointer;text-decoration:none;display:inline-block;text-align:center;
}
.principal{background:var(--verde);color:#fff}
.principal:hover{background:var(--verde-osc)}
.secundario{background:var(--blanco);color:var(--tinta);border:1px solid var(--borde)}
.peligro{background:var(--rojo);color:#fff}
.chico{padding:7px 14px;font-size:.85rem}

/* ---------- avisos ---------- */
.aviso{padding:13px 18px;border-radius:10px;margin-bottom:18px;font-size:.92rem;border-left:4px solid}
.aviso.ok{background:var(--verde-claro);border-color:var(--verde);color:var(--verde-osc)}
.aviso.error{background:var(--rojo-claro);border-color:var(--rojo);color:var(--rojo)}
.aviso.atencion{background:var(--amarillo-claro);border-color:var(--dorado);color:var(--amarillo)}

/* ---------- tablas ---------- */
.tabla-env{overflow-x:auto;background:var(--blanco);border:1px solid var(--borde);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--borde)}
th{background:var(--negro);color:var(--dorado-claro);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#faf9f6}
.vacio{padding:26px;text-align:center;color:var(--gris);font-style:italic}

/* ---------- etiquetas de estado ---------- */
.tag{display:inline-block;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:.04em}
.tag.pendiente{background:var(--amarillo-claro);color:var(--amarillo)}
.tag.aprobado{background:#e6f0fb;color:#12508f}
.tag.despachado{background:#efe7fb;color:#5b3b9e}
.tag.recibido,.tag.cerrado,.tag.devuelto{background:var(--verde-claro);color:var(--verde-osc)}
.tag.abierto,.tag.en_proceso{background:var(--amarillo-claro);color:var(--amarillo)}

/* ---------- accesos del inicio ---------- */
.accesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.acceso{
  background:var(--blanco);border:1px solid var(--borde);border-top:3px solid var(--dorado);
  border-radius:14px;padding:20px;text-decoration:none;color:var(--tinta);display:block;
}
.acceso:hover{border-color:var(--verde);box-shadow:0 3px 12px rgba(0,0,0,.07)}
.acceso b{display:block;color:var(--verde-osc);font-size:1.02rem;margin-bottom:4px}
.acceso span{font-size:.85rem;color:var(--gris)}

/* ---------- cifras del panel ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.cifra{background:var(--blanco);border:1px solid var(--borde);border-radius:14px;padding:18px}
.cifra .n{font-size:1.5rem;font-weight:700;color:var(--verde-osc);font-variant-numeric:tabular-nums}
.cifra .t{font-size:.8rem;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}

/* ---------- login ---------- */
.login-caja{max-width:380px;margin:8vh auto;background:var(--blanco);border:1px solid var(--borde);
  border-top:4px solid var(--dorado);border-radius:16px;padding:32px}
.login-caja h1{text-align:center;font-size:1.25rem}
.login-caja h1::after{margin:8px auto 0}
.login-caja .campos{grid-template-columns:1fr;margin-top:20px}
.login-caja button{width:100%;margin-top:6px}

@media (max-width:560px){
  .menu a{font-size:.8rem;padding:5px 9px}
  .yo{width:100%;margin-left:0;justify-content:space-between}
  .contenido{padding:16px 12px 40px}
}