/* ── Red Vecinal · Usuarios CSS ─────────────────────────────────────────── */

:root {
    --rv-verde:     #1D9E75;
    --rv-verde-dk:  #0F6E56;
    --rv-azul:      #185FA5;
    --rv-rojo:      #A32D2D;
    --rv-ambar:     #BA7517;
    --rv-gris-bg:   #F7F6F3;
    --rv-gris-brd:  #E2E1DC;
    --rv-radio:     10px;
    --rv-sombra:    0 2px 12px rgba(0,0,0,.07);
}

/* ── Contenedores ────────────────────────────────────────────────────────── */
.rv-registro-wrap,
.rv-login-wrap,
.rv-ficha-wrap {
    max-width: 480px;
    margin: 2rem auto;
    background: #fff;
    border: 1px solid var(--rv-gris-brd);
    border-radius: var(--rv-radio);
    padding: 2rem;
    box-shadow: var(--rv-sombra);
}

/* ── Tabs de registro ────────────────────────────────────────────────────── */
.rv-registro-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 1.25rem;
}
.rv-tab {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--rv-gris-brd);
    border-radius: var(--rv-radio);
    background: var(--rv-gris-bg);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #666;
    transition: all .15s;
}
.rv-tab.active,
.rv-tab:hover { background: var(--rv-verde); color: #fff; border-color: var(--rv-verde); }

/* ── Descripción de tipo ─────────────────────────────────────────────────── */
.rv-tipo-desc {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.rv-desc-mayor     { background: #EAF3DE; color: #3B6D11; }
.rv-desc-voluntario{ background: #E6F1FB; color: #185FA5; }

/* ── Login header ────────────────────────────────────────────────────────── */
.rv-login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.rv-login-logo { font-size: 40px; margin-bottom: .5rem; }
.rv-login-header h2 { font-size: 20px; font-weight: 600; color: #1a1a1a; margin: 0 0 4px; }
.rv-login-header p  { font-size: 14px; color: #666; margin: 0; }

/* ── Formulario ──────────────────────────────────────────────────────────── */
.rv-form { display: flex; flex-direction: column; gap: 14px; }

.rv-field { display: flex; flex-direction: column; gap: 5px; }
.rv-field label { font-size: 13px; font-weight: 500; color: #333; }
.rv-field input,
.rv-field select,
.rv-field textarea {
    border: 1px solid var(--rv-gris-brd);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    color: #1a1a1a;
    background: #fff;
    transition: border-color .15s;
    font-family: inherit;
}
.rv-field input:focus,
.rv-field select:focus,
.rv-field textarea:focus {
    outline: none;
    border-color: var(--rv-verde);
    box-shadow: 0 0 0 3px rgba(29,158,117,.1);
}
.rv-field-check { flex-direction: row; align-items: flex-start; }
.rv-field-check label { font-size: 13px; font-weight: 400; color: #555; }
.rv-field-check input { margin-top: 2px; margin-right: 8px; flex-shrink: 0; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.rv-btn-primary {
    background: var(--rv-verde);
    color: #fff;
    border: none;
    border-radius: var(--rv-radio);
    padding: 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    width: 100%;
}
.rv-btn-primary:hover    { background: var(--rv-verde-dk); }
.rv-btn-primary:disabled { background: #aaa; cursor: not-allowed; }

.rv-btn-secondary {
    background: transparent;
    color: var(--rv-verde);
    border: 1px solid var(--rv-verde);
    border-radius: var(--rv-radio);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.rv-btn-secondary:hover { background: #EAF3DE; }

.rv-btn-danger {
    background: var(--rv-rojo);
    color: #fff;
    border: none;
    border-radius: var(--rv-radio);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ── Mensajes ────────────────────────────────────────────────────────────── */
.rv-msg {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.rv-msg-ok    { background: #EAF3DE; color: #3B6D11; border: 1px solid #C0DD97; }
.rv-msg-error { background: #FCEBEB; color: #A32D2D; border: 1px solid #F7C1C1; }
.rv-msg-info  { background: #E6F1FB; color: #185FA5; border: 1px solid #B5D4F4; }

/* ── Links de login ──────────────────────────────────────────────────────── */
.rv-login-link,
.rv-login-links {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-top: .25rem;
}
.rv-login-links { display: flex; justify-content: space-between; }
.rv-login-link a,
.rv-login-links a { color: var(--rv-verde); text-decoration: none; font-weight: 500; }
.rv-login-link a:hover,
.rv-login-links a:hover { text-decoration: underline; }

/* ── Fichas de usuario ───────────────────────────────────────────────────── */
.rv-ficha-wrap { max-width: 600px; }
.rv-ficha-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rv-gris-brd);
    margin-bottom: 1.25rem;
}
.rv-ficha-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 600;
    flex-shrink: 0;
}
.rv-ficha-nombre { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 3px; }
.rv-ficha-zona   { font-size: 13px; color: #666; }

.rv-section-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

.rv-skills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 1rem;
}
.rv-skill {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--rv-gris-brd);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    transition: all .15s;
}
.rv-skill.on {
    background: #EAF3DE;
    border-color: #C0DD97;
    color: #085041;
    font-weight: 500;
}

.rv-tags-row {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.rv-tag {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    border: 1px solid var(--rv-gris-brd);
    cursor: pointer;
    color: #666;
    transition: all .15s;
}
.rv-tag.on { background: #E6F1FB; border-color: #B5D4F4; color: #185FA5; font-weight: 500; }

.rv-notice {
    display: flex; gap: 8px; align-items: flex-start;
    background: var(--rv-gris-bg);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* ── SOS flotante ────────────────────────────────────────────────────────── */
.rv-sos-bar {
    background: var(--rv-rojo);
    border-radius: var(--rv-radio);
    padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    cursor: pointer;
    margin-bottom: 1.25rem;
}
.rv-sos-icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; flex-shrink: 0;
}
.rv-sos-title { font-size: 15px; font-weight: 600; color: #fff; }
.rv-sos-sub   { font-size: 12px; color: #F4C0D1; margin-top: 2px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .rv-registro-wrap,
    .rv-login-wrap,
    .rv-ficha-wrap { margin: 1rem; padding: 1.25rem; }
    .rv-skills-grid { grid-template-columns: 1fr; }
    .rv-login-links { flex-direction: column; gap: 8px; align-items: center; }
}