:root{
  --brand:#E31B23;      /* Rojo corporativo */
  --brand-soft:#fde8e9;
  --bg:#F5F6F8;
  --card:#FFFFFF;
  --text:#1F2937;
  --muted:#6B7280;
  --border:#E5E7EB;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container{
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 16px;
}

.header{
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:24px;
}

.brand-badge{
  width:110px;
  height:110px;
  background: #fff;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  overflow:hidden;
}

.brand-badge img{
  width:100%;
  height:auto;
}

h1{
  margin:0;
  font-size:22px;
  font-weight:800;
  color: var(--brand);
}

h6{
  margin:0;
  font-size:12px;
  font-weight:800;
  color: var(--brand);
}

.subtitle{
  margin-top:6px;
  color: var(--muted);
  font-size:14px;
}

.card{
  background: var(--card);
  border-radius:20px;
  padding:24px;
  border:1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}

@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr; }
}

.field label{
  display:block;
  font-size:13px;
  margin-bottom:6px;
  color: var(--muted);
  font-weight:700;
}

.field input,
.field textarea,
.field select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  font-size:14px;
  color:var(--text);
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(227,27,35,.15);
}

hr{
  border:none;
  border-top:1px solid var(--border);
  margin:22px 0;
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

button{
  border-radius:10px;
  padding:10px 14px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:14px;
}

button:hover{ background:#F9FAFB; }

button.primary{
  background: var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  font-weight:700;
}

button.primary:hover{ background:#c9151d; }

.alert{
  margin-bottom:16px;
  padding:14px;
  border-radius:12px;
  background:#fde8e9;
  border:1px solid rgba(227,27,35,.4);
  color:#7f1d1d;
  font-size:14px;
}

.ok{
  background:#ecfdf5;
  border:1px solid #34d399;
  color:#065f46;
}

.small{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

/* ====== FIRMA ====== */
.canvas-wrap{
  border:1px dashed var(--border);
  border-radius:16px;
  padding:14px;
  background:#fff;
}

canvas{
  width:100%;
  height:180px;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--border);
  touch-action:none;
}

/* =========================
   FIRMA + CONSENTIMIENTO (ARREGLADO)
========================= */
.signature-consent{
  display:grid;
  grid-template-columns: 2fr 1.2fr;
  gap:20px;
  margin-top:20px;
}

@media (max-width: 820px){
  .signature-consent{
    grid-template-columns: 1fr;
  }
}

/* Consentimiento compacto */
.consent{
  padding:16px;
  background: var(--brand-soft);
  border-radius:14px;
  border:1px solid rgba(227,27,35,.25);
  font-size:14px;
}

.consent-check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  line-height:1.4;
}

.consent-check input{
  margin-top:4px;
  transform: scale(1.1);
}

.consent a{
  color: var(--brand);
  font-weight:800;
  text-decoration: underline;
}

/* =========================
   DASHBOARD FULL WIDTH
========================= */

/* Contenedor normal sigue igual */
.container{
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 16px;
}

/* Contenedor ancho SOLO para dashboard */
.container-wide{
  max-width: 100%;
  margin: 24px auto;
  padding: 0 24px;
}

/* La tarjeta de la tabla ocupa todo el ancho */
.container-wide .card{
  max-width: 100%;
}

/* La tabla usa todo el ancho disponible */
.container-wide .table-wrap{
  width: 100%;
}

/* Mejora visual para pantallas grandes */
@media (min-width: 1400px){
  .container-wide{
    padding-left: 48px;
    padding-right: 48px;
  }
}

.info-box-green{
  background:#ECFDF5;          /* verde clarito */
  border:1px solid #10B981;    /* borde verde */
  border-radius:12px;
  padding:14px 16px;
  margin-top:12px;
  color:#065F46;
  font-size:14px;
  line-height:1.35;
}

.info-box-green strong{
  display:block;
  margin-bottom:6px;
  font-size:15px;
  color:#065F46;
}