:root{
  /* Paleta RAM Consulting */
  --tinta:#262322; --tinta2:#5c5654; --linea:#e3dedc; --fondo:#f3f1f0;
  --papel:#fff; --acento2:#f8ecec; --ok:#1c7a4a; --error:#b3261e;
  --barra:#93171f; --acento:#93171f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif}
.contenedor{max-width:1180px;margin:0 auto;padding:0 20px}

.barra{background:var(--barra);color:#fff}
.barra-int{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:20px}
.marca{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.5px}
.marca span{font-weight:400;opacity:.7;margin-left:6px;font-size:13px}
.barra nav{display:flex;gap:18px;flex-wrap:wrap}
.barra nav a{color:#cfd9e1;text-decoration:none;font-size:14px}
.barra nav a:hover{color:#fff}
.barra nav a.salir{opacity:.65}

main{padding:26px 20px 60px}
h1{font-size:24px;margin:0 0 4px}
h2{font-size:18px;margin:32px 0 10px}
h3{font-size:15px;margin:22px 0 6px;color:var(--tinta2)}
section{margin-bottom:8px}

.encabezado{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:8px;padding:24px;max-width:860px}
.tarjeta.estrecha{max-width:380px;margin:60px auto}
.ayuda{color:var(--tinta2);font-size:13.5px;margin:6px 0 14px}
.vacio{color:var(--tinta2);padding:30px 0}
.gris{color:var(--tinta2)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}

label{display:block;margin:0 0 14px;font-size:13.5px;color:var(--tinta2)}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=color],input[type=file],select,textarea{
  display:block;width:100%;margin-top:5px;padding:8px 10px;border:1px solid var(--linea);
  border-radius:5px;font:inherit;color:var(--tinta);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento2);border-color:var(--acento)}
input[type=color]{height:40px;padding:4px;cursor:pointer}
input[type=file]{padding:6px 8px;background:#fafcfd}
label.radio{display:flex;align-items:center;gap:8px;color:var(--tinta);font-weight:600;font-size:14px;margin-bottom:10px}
label.radio input{width:auto;margin:0}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 18px}
fieldset.opcion{border:1px solid var(--linea);border-radius:6px;padding:16px 16px 4px;margin:0 0 14px}
.linea{display:flex;gap:16px;align-items:end;margin-bottom:14px}
.linea label{margin:0;min-width:260px}

.btn{display:inline-block;background:var(--acento);color:#fff;border:0;border-radius:5px;
  padding:9px 18px;font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.1)}
.btn.secundario{background:#fff;color:var(--tinta);border:1px solid var(--linea)}
.acciones{display:flex;gap:10px;align-items:center;margin-top:18px}
.enlace{color:var(--acento);font-size:13px;text-decoration:none;margin-left:14px}
.enlace:hover{text-decoration:underline}
a.peligro{color:var(--error);margin-left:10px}

.tabla{width:100%;border-collapse:collapse;background:var(--papel);
  border:1px solid var(--linea);border-radius:8px;overflow:hidden;margin-bottom:6px}
.tabla th,.tabla td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--linea);font-size:13.5px}
.tabla.compacta th,.tabla.compacta td{padding:6px 10px;font-size:13px}
.tabla thead th{background:#eef2f5;font-weight:600;color:var(--tinta2);
  text-transform:uppercase;letter-spacing:.4px;font-size:11.5px}
.tabla tbody tr:hover{background:#fafcfd}
.tabla tfoot th{background:#f7f9fb;font-weight:700}
.tabla .der{text-align:right}
.tabla.ficha th{width:200px;vertical-align:top;background:#f7f9fb}
.tabla a{color:var(--acento);text-decoration:none}

.tarjetas{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0 24px}
.dato{background:var(--papel);border:1px solid var(--linea);border-radius:8px;
  padding:14px 18px;min-width:150px;color:var(--tinta2);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.4px}
.dato span{display:block;font-size:24px;font-weight:700;color:var(--tinta);
  text-transform:none;letter-spacing:0;margin-bottom:2px}

.etiqueta{display:inline-block;background:var(--acento2);color:var(--acento);
  border-radius:10px;padding:1px 9px;font-size:11.5px}
.etiqueta.generado{background:#e3f3ea;color:var(--ok)}

.aviso{padding:11px 14px;border-radius:6px;margin-bottom:16px;font-size:14px}
.aviso-ok{background:#e3f3ea;color:var(--ok)}
.aviso-error{background:#fbe9e7;color:var(--error)}
.aviso-info{background:var(--acento2);color:var(--acento)}

.pasos{display:flex;list-style:none;padding:0;margin:0 0 22px;gap:6px;flex-wrap:wrap}
.pasos li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tinta2);
  background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:4px 13px 4px 5px}
.pasos li span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--linea);color:var(--tinta2);font-size:11px;font-weight:700}
.pasos li.activo{border-color:var(--acento);color:var(--acento)}
.pasos li.activo span{background:var(--acento);color:#fff}
.pasos li.hecho span{background:var(--ok);color:#fff}

.pie{color:var(--tinta2);font-size:12.5px;border-top:1px solid var(--linea);padding-top:14px}
code{background:#eef2f5;padding:1px 5px;border-radius:3px;font-size:12.5px}

@media print{
  .barra,.pasos,.acciones,.enlace,.pie{display:none}
  body{background:#fff}
  .tabla{border-color:#bbb}
}


/* ---- v2: logo, formularios en línea, hojas de ruta ---- */
.marca{display:flex;align-items:center;gap:8px}
.logo{height:60px;width:auto;display:block}
form.enlinea{display:inline;margin:0}
form.enlinea select{display:inline-block;width:auto;margin:0;padding:3px 6px;font-size:12.5px}
.enlinea label{margin:0}

.ruta-hoja{background:var(--papel);border:1px solid var(--linea);border-radius:8px;
  padding:18px 20px;margin-bottom:18px}
.ruta-cab{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:2px solid var(--barra);padding-bottom:10px;margin-bottom:12px}
.ruta-cab h2{margin:0}
.ruta-dato{font-size:12.5px;color:var(--tinta2);text-align:right}
.ruta-dato span{font-size:18px;font-weight:700;color:var(--tinta)}

@media print{
  .barra,.pasos,.acciones,.enlace,.pie,.no-imprimir{display:none}
  body{background:#fff}
  .ruta-hoja{border:none;padding:0;page-break-after:always;margin-bottom:0}
  .ruta-hoja:last-child{page-break-after:auto}
  main{padding:0}
}

/* ---- v2.5: menú responsivo, calculadora, datos, páginas ---- */
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.menu-btn span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

@media (max-width:820px){
  .barra-int{flex-wrap:wrap;position:relative}
  .menu-btn{display:flex}
  #nav{display:none;flex-direction:column;width:100%;gap:0;padding:6px 0 4px;order:3}
  #nav.abierto{display:flex}
  .barra nav a{padding:11px 4px;border-top:1px solid rgba(255,255,255,.12);font-size:15px}
  .barra nav a.salir{opacity:.85}
}

/* Páginas de contenido */
.contenido-pag{background:var(--papel);border:1px solid var(--linea);border-radius:8px;
  padding:26px 30px;max-width:820px;line-height:1.65}
.contenido-pag h1{margin-top:0}
.contenido-pag p{margin:0 0 12px}
.lista-docs{list-style:none;padding:0;margin:12px 0}
.lista-docs li{padding:10px 0;border-bottom:1px solid var(--linea)}
.lista-docs a{color:var(--acento);text-decoration:none;font-weight:600}
.lista-docs a:hover{text-decoration:underline}

/* Calculadora */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 20px}
.calc-res{background:var(--acento2);border-radius:8px;padding:18px 22px;margin-top:8px}
.calc-res .grande{font-size:32px;font-weight:700;color:var(--acento)}
.calc-res .etq{color:var(--tinta2);font-size:13px;text-transform:uppercase;letter-spacing:.4px}

/* Explorador de datos: pirámide */
.piramide{display:flex;flex-direction:column;gap:2px;margin:14px 0}
.pir-fila{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:6px;font-size:12px}
.pir-barra{height:16px;border-radius:3px}
.pir-h{background:var(--acento);justify-self:end}
.pir-h{background:#3B62E3}
.pir-m{background:#F5276C}
.pir-etq{text-align:center;color:var(--tinta2)}


@media (max-width: 640px) {
  /* Encabezado: título y botón "Descargar Excel" apilados */
  .encabezado {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .encabezado .btn { text-align: center; }

  /* Filtros: un control por fila, a todo el ancho */
  .linea {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .linea label { width: 100%; }
  .linea select {
    width: 100%;
    box-sizing: border-box;
  }

   /* Tabla: letra y relleno reducidos para que entren las 4 columnas */
  .tabla.compacta { font-size: 12px; }
  .tabla.compacta th,
  .tabla.compacta td { padding: 4px 6px; }
}

  @media (max-width: 640px) {
  .tabla {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}
}
@media (max-width: 640px) {
  .tarjetas { flex-wrap: wrap; }
  .tarjetas .dato { flex: 1 1 45%; min-width: 0; }