:root{
  --vino:#75142e; --vino-2:#5a0f22; --dorado:#bb935c;
  --tinta:#222; --papel:#fff; --niebla:#f6f4f3; --borde:#e8e4e1;
  --ok:#2e7d32; --danger:#c62828; --muted:#7b6f6a;
  --r:16px; --shadow:0 10px 30px rgba(0,0,0,.10);
}

/* ===== Reset básico ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:#3f0f17;
  color:var(--tinta);
  line-height:1.35;
}
a{ color:inherit; text-decoration:none }

/* ===== Shell ===== */
.shell{
  max-width:1100px;
  margin:auto;
  background:var(--papel);
  box-shadow:var(--shadow);
  border-radius:20px;
  overflow:hidden;
}

/* ===== Header ===== */
header.app{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--vino); color:#fff;
}
.brand{ display:flex; gap:12px; align-items:center }
.badge{ width:34px; height:34px; border-radius:10px; background:var(--vino-2); display:grid; place-items:center }
.subtitle{ font-size:12px; opacity:.8 }
.nav a{ margin-left:14px; opacity:.9 }
.nav a:hover{ opacity:1 }

/* ===== Vistas ===== */
.view{ display:none; padding:22px }
.view.active{ display:block }

/* ===== Cards & grids ===== */
.card{
  background:var(--niebla);
  border:1px solid var(--borde);
  border-radius:var(--r);
  padding:18px;
}
.card.auth{ max-width:480px; margin:40px auto; background:#fff }
.grid{ display:grid; gap:18px }
.grid-2{ grid-template-columns:1fr 1fr }
.grid-3{ grid-template-columns:1fr 1fr 1fr }
@media (max-width:900px){ .grid-2,.grid-3{ grid-template-columns:1fr } }

.kpis{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; margin:6px 0 14px;
}
.kpi{ background:#fff; border:1px solid var(--borde); border-radius:12px; padding:10px; text-align:center }
.kpi b{ display:block; font-size:28px }

/* ===== Formularios ===== */
label{ font-weight:700; margin-bottom:6px; display:block }
input,select,textarea{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--borde);
  background:#fff;
}
input[type=range]{ padding:0 }
textarea{ resize:vertical }
.field{ margin:12px 0 }
.section-title{ margin:8px 0 2px }
.form-head{ display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:6px }
.options{ display:flex; gap:12px; flex-wrap:wrap }
.options.col{ flex-direction:column }
.options.wrap .opt{ min-width:160px }
.opt{
  display:flex; gap:8px; align-items:center;
  background:#fff; border:1px solid var(--borde); border-radius:12px; padding:8px 10px;
}
.check{ display:flex; gap:8px; align-items:center }
.row{ display:flex; align-items:center }
.row.gap{ gap:12px }
.row.end{ justify-content:flex-end }
.col{ flex:1 }

/* ===== Listas verticales (no tarjetas) ===== */
.options:not(.cards){
  display:grid; gap:10px;
}
.options:not(.cards) .opt{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; background:#fff;
  border:1px solid var(--borde);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  cursor:pointer; text-align:left; min-height:unset;
}
.options:not(.cards) .opt:hover{
  border-color:#d9d3cf; box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.options:not(.cards) .opt:focus-within{
  outline:3px solid rgba(117,20,46,.15);
}
.options:not(.cards) .opt.is-checked{
  border-color:var(--vino);
  box-shadow:0 4px 18px rgba(117,20,46,.12);
  background: linear-gradient(0deg, rgba(187,147,92,.04), rgba(187,147,92,.04)), #fff;
}
.options:not(.cards) .opt input[type="radio"],
.options:not(.cards) .opt input[type="checkbox"]{
  width:20px; height:20px; margin:0; accent-color:var(--vino); flex:0 0 auto;
}

/* ===== Layout responsive de 2 columnas para el form ===== */
.form-grid{ display:block } /* móvil: 1 columna */
@media (min-width: 992px){
  .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr; /* 2 columnas */
    gap:20px 40px;
  }
}
.form-footer{ grid-column:1 / -1 }

/* ===== RATINGS (sliders) ===== */
/* Contenedor de todas las tarjetas de rating */
.ratings{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;      /* 1 columna en móvil */
  overflow-x:hidden;              /* evita scroll horizontal */
}

/* Tarjeta individual de rating:
   1) Encabezado (título + output)
   2) Slider (barra)
   3) Escala (0 5 10) SIEMPRE debajo del slider */
.rating{
  display:grid;
  grid-template-areas:
    "hdr"
    "slider"
    "scale";
  grid-template-columns: 1fr;
  align-items:center;
  background:#fff;
  border:1px solid var(--borde);
  border-radius:10px;
  padding:10px 12px;
  min-width:0;                   /* evita empujar el ancho del grid */
}

/* Encabezado (título + badge) */
.rating .d-flex{
  grid-area: hdr;
  flex-wrap: wrap;
  gap:.5rem;
}
.rating strong{
  flex:1 1 auto; min-width:0; white-space:normal;
}
.rating output{
  flex:0 0 auto;
}

/* Slider */
.rating input[type="range"]{
  grid-area: slider;
  display:block;
  width:100%; max-width:100%;
  margin-top:.25rem;
}

/* Escala “0 5 10” debajo del slider */
.rating .scale{
  grid-area: scale;
  display:flex; justify-content:space-between;
  font-size:.85rem; color:#6c757d; /* muted */
  margin-top:.25rem;
}

/* Fallback: si no puedes añadir class="scale" en HTML,
   el último div dentro de .rating será la escala */
.rating > div:last-child{
  grid-area: scale;
  display:flex; justify-content:space-between;
  font-size:.85rem; color:#6c757d;
  margin-top:.25rem;
}

/* Escritorio: dos columnas de tarjetas de rating */
@media (min-width: 992px){
  .ratings{ grid-template-columns:1fr 1fr; }
}

/* Ajustes específicos para pantallas muy chicas */
@media (max-width: 575.98px){
  .rating{ padding:8px 10px; }
  .rating .scale{ font-size:.8rem; }
}

/* ===== Tabla ===== */
.table-wrap{ overflow:auto }
table{
  width:100%; border-collapse:collapse; background:#fff;
  border-radius:12px; overflow:hidden;
}
thead th{ background:#f3f1ef; font-weight:700 }
td,th{ padding:10px; border-bottom:1px solid var(--borde); text-align:left }
tr:hover td{ background:#faf9f8 }

/* ===== Botones ===== */
.btn{
  padding:10px 14px; border-radius:12px; border:1px solid var(--borde);
  background:#fff; cursor:pointer;
}
.btn:hover{ background:#fdfdfd }
.btn.cta{ background:var(--dorado); border-color:var(--dorado); font-weight:700 }
.btn.cta:hover{ filter:brightness(.97) }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff }
.btn:disabled{ opacity:.6; cursor:not-allowed }

/* ===== Footer ===== */
.app-footer{ text-align:center; color:#fff; padding:16px; opacity:.9; background:transparent }

/* ===== Helpers ===== */
.muted{ color:var(--muted); font-size:.92rem }
.list{ margin:6px 0 0 16px }

/* ===== Modal éxito (compacto y responsive) ===== */
#successModal .modal-dialog{
  margin:.75rem; max-width:520px;
}
#successModal .modal-content{
  height:auto !important; max-height:80vh;
  border-radius:var(--bs-border-radius-lg) !important;
  box-shadow:var(--bs-box-shadow-sm);
}
#successModal .modal-header,
#successModal .modal-footer{ padding:.75rem 1rem; }
#successModal .modal-body{ padding:.875rem 1rem; }
#successModal .modal-title{ font-size:1rem; }
@media (max-width:575.98px){
  #successModal .modal-dialog{
    width:auto; max-width:calc(100% - 1.5rem);
  }
  #successModal .modal-body p{
    font-size:.95rem; line-height:1.35;
  }
  #successModal .btn{
    padding:.5rem .75rem; font-size:.95rem;
  }
}