/* ==========================================================================
   VAKITA - Estilos base
   ========================================================================== */

:root {
    --verde:      #12a150;
    --verde-osc:  #0d7a3c;
    --tinta:      #16241c;
    --gris:       #6b7770;
    --gris-claro: #eef1ef;
    --borde:      #dde3e0;
    --fondo:      #f7f9f8;
    --rojo:       #c0392b;
    --papel:      #ffffff;
    --radio:      12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--tinta);
    line-height: 1.6;
}

a { color: var(--verde-osc); }

.contenedor { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.angosto    { max-width: 620px; }

/* --- Barra superior ------------------------------------------------------ */
.barra {
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
    padding: 14px 0;
    margin-bottom: 32px;
}
.barra .contenedor {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo {
    font-weight: 800; font-size: 21px; color: var(--verde-osc);
    text-decoration: none; letter-spacing: -0.5px;
}
.logo span { color: var(--tinta); font-weight: 400; font-size: 13px; }

/* --- Bloques ------------------------------------------------------------- */
.tarjeta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 26px;
    margin-bottom: 22px;
}

h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.4px; }
h2 { font-size: 18px; margin: 30px 0 12px; }
.sub { color: var(--gris); margin: 0 0 24px; }

/* --- Formularios --------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 5px; }
.ayuda { font-weight: 400; color: var(--gris); font-size: 13px; display: block; margin-top: 2px; }

input[type=text], input[type=email], input[type=password],
input[type=number], textarea, select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: var(--papel);
}
input:focus, textarea:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
textarea { min-height: 90px; resize: vertical; }

.fila { display: flex; gap: 14px; flex-wrap: wrap; }
.fila > * { flex: 1 1 200px; }

.check { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; font-size: 14px; }
.check input { margin-top: 4px; }

/* --- Botones ------------------------------------------------------------- */
.boton {
    display: inline-block;
    background: var(--verde);
    color: #fff;
    border: 0;
    padding: 13px 26px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}
.boton:hover { background: var(--verde-osc); }
.boton:disabled { background: var(--gris); cursor: wait; }
.boton.ancho { width: 100%; text-align: center; }
.boton.gris { background: var(--gris-claro); color: var(--tinta); }

/* --- Montos rapidos ------------------------------------------------------ */
.montos { display: flex; gap: 9px; flex-wrap: wrap; margin: 8px 0 4px; }
.montos button {
    flex: 1 1 80px;
    padding: 11px 8px;
    border: 1px solid var(--borde);
    background: var(--papel);
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
}
.montos button.activo { border-color: var(--verde); background: #e8f6ee; color: var(--verde-osc); }

/* --- Barra de progreso --------------------------------------------------- */
.progreso { background: var(--gris-claro); border-radius: 99px; height: 10px; overflow: hidden; margin: 14px 0 8px; }
.progreso div { background: var(--verde); height: 100%; border-radius: 99px; }
.cifra { font-size: 24px; font-weight: 800; color: var(--verde-osc); }

/* --- Avisos -------------------------------------------------------------- */
.aviso {
    padding: 13px 16px; border-radius: 8px; font-size: 14px; margin: 16px 0;
    border: 1px solid;
}
.aviso.ok    { background: #e8f6ee; border-color: #b7e0c7; color: #0d7a3c; }
.aviso.error { background: #fdecea; border-color: #f5c2bc; color: #a03027; }
.aviso.info  { background: #eef3fb; border-color: #c9d9f0; color: #24487f; }

/* --- Tablas -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--borde); }
th { color: var(--gris); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }

.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.etiqueta.ok    { background: #e8f6ee; color: #0d7a3c; }
.etiqueta.espera{ background: #fdf3e0; color: #9a6a10; }
.etiqueta.mal   { background: #fdecea; color: #a03027; }

.chico { font-size: 13px; color: var(--gris); }
.mono  { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }

.pie { text-align: center; color: var(--gris); font-size: 13px; padding: 40px 20px; }

/* --- Pasos numerados ----------------------------------------------------- */
.paso {
    border-left: 3px solid var(--verde);
    padding: 2px 0 2px 16px;
    margin: 22px 0;
}
.paso h3 { margin: 0 0 4px; font-size: 16px; }