/* ============================================================
   ROCOTO DIGITAL · Generador de Propuestas
   Los colores de marca llegan como variables desde el panel.
   ============================================================ */

:root{
  --rojo:#E1232B; --oscuro:#1B1B1B; --crema:#F2EFEA; --texto:#3C3C3C;
  --borde:#E2DED8; --gris:#8A8A8A; --ok:#1E8E4A; --aviso:#B8860B; --error:#C0392B;
  --radio:10px; --sombra:0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:#F7F5F2; color:var(--texto); font-size:15px; line-height:1.55;
}
a{color:var(--rojo); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Barra superior ---------- */
.barra{background:var(--oscuro); color:#fff; position:sticky; top:0; z-index:50}
.barra-int{max-width:1180px; margin:0 auto; padding:0 20px; height:58px;
  display:flex; align-items:center; gap:28px}
.marca{color:#fff; font-weight:400; letter-spacing:.14em; font-size:13px;
  display:flex; align-items:center; gap:9px}
.marca:hover{text-decoration:none}
.marca b{font-weight:700}
.marca-punto{width:14px; height:14px; border-radius:50%;
  border:3px solid var(--rojo); display:inline-block}

.menu{display:flex; align-items:center; gap:4px; margin-left:12px; flex:1}
.menu > a, .menu-desplegable > span{
  color:#D8D4CF; padding:8px 13px; border-radius:7px; font-size:14px;
  cursor:pointer; display:inline-block}
.menu > a:hover, .menu-desplegable:hover > span{background:#2C2C2C; color:#fff; text-decoration:none}
.menu .activo{background:var(--rojo); color:#fff}

.menu-desplegable{position:relative}
.menu-caja{display:none; position:absolute; top:100%; left:0; min-width:220px;
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:6px; margin-top:6px}
.menu-desplegable:hover .menu-caja{display:block}
.menu-caja a{display:block; padding:9px 12px; color:var(--texto); border-radius:6px; font-size:14px}
.menu-caja a:hover{background:var(--crema); text-decoration:none}

.usuario{display:flex; align-items:center; gap:14px; font-size:13px; color:#B9B5B0}
.salir{color:#B9B5B0}
.salir:hover{color:#fff}

/* ---------- Estructura ---------- */
.contenido{max-width:1180px; margin:0 auto; padding:28px 20px 60px}
.pie{max-width:1180px; margin:0 auto; padding:18px 20px 34px;
  display:flex; justify-content:space-between; color:var(--gris); font-size:12px}

h1{font-size:25px; margin:0 0 6px; color:var(--oscuro); font-weight:700}
h2{font-size:18px; margin:30px 0 12px; color:var(--oscuro)}
h3{font-size:15px; margin:20px 0 8px; color:var(--oscuro)}
.subtitulo{color:var(--gris); margin:0 0 24px; font-size:14px}

/* ---------- Tarjetas ---------- */
.tarjeta{background:#fff; border:1px solid var(--borde); border-radius:var(--radio);
  padding:22px; margin-bottom:18px; box-shadow:var(--sombra)}
.tarjeta-titulo{font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rojo); font-weight:700; margin:0 0 16px;
  padding-bottom:10px; border-bottom:1px solid var(--borde)}

.rejilla{display:grid; gap:16px}
.rejilla-2{grid-template-columns:repeat(2,1fr)}
.rejilla-3{grid-template-columns:repeat(3,1fr)}
.rejilla-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){
  .rejilla-2,.rejilla-3,.rejilla-4{grid-template-columns:1fr}
  .barra-int{gap:12px}
  .menu{display:none}
}

/* ---------- Formularios ---------- */
.campo{margin-bottom:15px}
.campo label{display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:var(--oscuro)}
.campo .pista{font-size:12px; color:var(--gris); font-weight:400; margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--borde); border-radius:8px;
  font-family:inherit; font-size:14px; color:var(--texto); background:#fff}
textarea{min-height:88px; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--rojo); box-shadow:0 0 0 3px rgba(225,35,43,.12)}
input[readonly]{background:#F4F2EF; color:var(--gris)}

.boton{display:inline-block; background:var(--rojo); color:#fff; border:none;
  padding:11px 22px; border-radius:8px; font-size:14px; font-weight:600;
  cursor:pointer; font-family:inherit}
.boton:hover{background:#C51D24; text-decoration:none; color:#fff}
.boton:disabled{background:#D8D4CF; cursor:not-allowed}
.boton-oscuro{background:var(--oscuro)} .boton-oscuro:hover{background:#000}
.boton-linea{background:#fff; color:var(--texto); border:1px solid var(--borde)}
.boton-linea:hover{background:var(--crema); color:var(--texto)}
.boton-chico{padding:6px 13px; font-size:13px}

/* ---------- Tablas ---------- */
table{width:100%; border-collapse:collapse; font-size:14px}
th{background:var(--oscuro); color:#fff; text-align:left; padding:10px 12px;
  font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:600}
th:first-child{border-radius:8px 0 0 0} th:last-child{border-radius:0 8px 0 0}
td{padding:10px 12px; border-bottom:1px solid var(--borde); vertical-align:middle}
tbody tr:hover{background:#FBFAF9}
.num{text-align:right; font-variant-numeric:tabular-nums}
.tachado{text-decoration:line-through; color:var(--gris); font-size:13px}

/* ---------- Avisos ---------- */
.alerta{padding:12px 16px; border-radius:9px; margin-bottom:18px; font-size:14px;
  border-left:4px solid}
.alerta-ok{background:#EAF6EE; border-color:var(--ok); color:#14653A}
.alerta-aviso{background:#FDF6E3; border-color:var(--aviso); color:#7A5C00}
.alerta-error{background:#FBEAE8; border-color:var(--error); color:#8E241B}

.etiqueta{display:inline-block; padding:2px 9px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.etiqueta-ok{background:#EAF6EE; color:#14653A}
.etiqueta-falta{background:#FBEAE8; color:#8E241B}
.etiqueta-gris{background:#EFEDEA; color:var(--gris)}

/* ---------- Selección de planes y servicios ---------- */
.opciones{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.opcion{position:relative; border:2px solid var(--borde); border-radius:var(--radio);
  padding:15px; cursor:pointer; background:#fff; transition:border-color .12s}
.opcion:hover{border-color:#C9C4BD}
.opcion input{position:absolute; opacity:0}
.opcion.marcada{border-color:var(--rojo); background:#FFF8F8}
.opcion-nombre{font-weight:700; color:var(--oscuro); font-size:15px}
.opcion-precio{color:var(--rojo); font-weight:700; font-size:19px; margin:5px 0}
.opcion-lista{font-size:12.5px; color:var(--gris); line-height:1.7; margin:8px 0 0; padding:0; list-style:none}
.opcion-lista li:before{content:'✓'; color:var(--rojo); font-weight:700; margin-right:6px}
.opcion.sin-precio{border-style:dashed; opacity:.62}
.opcion.sin-precio .opcion-precio{color:var(--error); font-size:13px}

/* ---------- Pantalla de acceso ---------- */
.acceso{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--oscuro); padding:20px}
.acceso-caja{background:#fff; border-radius:14px; padding:38px; width:100%; max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.acceso-marca{text-align:center; margin-bottom:26px}
.acceso-marca .aro{width:44px; height:44px; border-radius:50%; border:5px solid var(--rojo);
  margin:0 auto 12px}
.acceso-marca span{letter-spacing:.16em; font-size:13px; color:var(--oscuro)}
.acceso-marca b{font-weight:700}
.acceso .boton{width:100%; margin-top:6px}

/* ---------- Editor de secciones ---------- */
.seccion-bloque{border:1px solid var(--borde); border-radius:var(--radio);
  margin-bottom:14px; background:#fff; overflow:hidden}
.seccion-cabeza{display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--crema); border-bottom:1px solid var(--borde)}
.seccion-cabeza h3{margin:0; font-size:14px}
.seccion-cuerpo{padding:14px 16px}
.seccion-cuerpo textarea{min-height:150px; border:none; padding:0; font-size:14.5px}
.seccion-cuerpo textarea:focus{box-shadow:none}
.marca-doc{font-size:11px; color:var(--gris); text-transform:uppercase; letter-spacing:.05em}

/* ---------- Espera de generación ---------- */
.espera{text-align:center; padding:70px 20px}
.espera .aro{width:52px; height:52px; border:5px solid var(--crema);
  border-top-color:var(--rojo); border-radius:50%; margin:0 auto 22px;
  animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.espera p{color:var(--gris)}