/* Riosucio Responde — estilos base (frontend + admin) */

/* --- Formularios frontend --- */
.rr-form { max-width: 640px; }
.rr-campo { margin-bottom: 1rem; }
.rr-campo label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.rr-requerido { color: #c0392b; }
.rr-campo input[type="text"],
.rr-campo input[type="tel"],
.rr-campo input[type="email"],
.rr-campo input[type="number"],
.rr-campo textarea,
.rr-campo select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1rem;
}
.rr-checkbox-grupo { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.rr-checkbox { font-weight: 400; display: flex; align-items: center; gap: 0.35rem; }
.rr-ayuda { display: block; font-size: 0.85rem; color: #666; margin-top: 0.25rem; }
.rr-honeypot { position: absolute; left: -9999px; top: -9999px; }
.rr-boton-enviar {
	background: #c0392b;
	color: #fff;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-size: 1rem;
	cursor: pointer;
}
.rr-boton-enviar:disabled { opacity: 0.6; cursor: default; }
.rr-mensaje { min-height: 1.2rem; font-weight: 600; }
.rr-mensaje-exito { color: #1e7e34; }
.rr-mensaje-error { color: #c0392b; }

/* --- Listados públicos --- */
.rr-estadisticas { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.rr-stat { text-align: center; }
.rr-stat-numero { display: block; font-size: 2rem; font-weight: 700; }
.rr-stat-label { font-size: 0.9rem; color: #555; }
.rr-listado { display: grid; gap: 1rem; }
.rr-tarjeta { border: 1px solid #e2e2e2; border-radius: 8px; padding: 1rem; }
.rr-tarjeta-sector { font-weight: 700; }
.rr-tarjeta-fecha { font-size: 0.8rem; color: #888; }

/* --- Admin --- */
.rr-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.rr-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1.25rem; }
.rr-card-total { font-size: 1.8rem; font-weight: 700; margin: 0.25rem 0; }
.rr-card-total span { font-size: 0.9rem; font-weight: 400; color: #666; }
.rr-card-estados { list-style: none; margin: 0.5rem 0; padding: 0; font-size: 0.9rem; }
.rr-filtros { margin: 1rem 0; }
.rr-tabla td, .rr-tabla th { vertical-align: top; padding: 0.6rem 0.75rem; }
.rr-acciones { display: flex; flex-direction: column; gap: 0.4rem; min-width: 160px; }
.rr-form-inline { margin: 0; }
.rr-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; background: #eee; }
.rr-badge-ok { background: #d4edda; color: #1e7e34; }
.rr-badge-warn { background: #fff3cd; color: #856404; }
.rr-detalle-fotos img { max-width: 90px; margin: 0.25rem; border-radius: 4px; }

/* =====================================================
   TARJETAS
===================================================== */

.rr-card-formulario{
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:28px;
	padding:35px 25px;
	text-align:center;
	box-shadow:0 15px 40px rgba(0,0,0,.06);

	display:flex;
	flex-direction:column;
	align-items:center;

	width:100%;
	height:100%;
	min-height:480px;

	box-sizing:border-box;
}

.rr-card-icono{
	width:90px;
	height:90px;
	border-radius:50%;
	background:#eef2ff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:42px;
	margin-bottom:20px;
}

.rr-card-formulario h3{
	font-size:2rem;
	line-height:1.2;
	font-weight:700;
	color:#111827;

	margin:0 0 20px;

	min-height:80px;

	display:flex;
	align-items:center;
	justify-content:center;
}

.rr-card-formulario p{
	color:#6b7280;
	line-height:1.7;

	flex:1;

	display:flex;
	align-items:flex-start;
	justify-content:center;

	margin-bottom:30px;
}

.rr-abrir-modal{
	margin-top:auto;

	background:#ff4b5c;
	color:#fff;

	border:none;

	padding:14px 28px;

	border-radius:14px;

	font-weight:700;

	cursor:pointer;

	transition:.3s;
}

.rr-abrir-modal:hover{
	transform:translateY(-2px);
}

/* =====================================================
   MODAL
===================================================== */

.rr-modal{
	position:fixed !important;
	top:0 !important;
	left:0 !important;
	width:100vw !important;
	height:100vh !important;

	display:none;

	z-index:999999999 !important;
}

.rr-modal-activo{
	display:flex !important;
	align-items:center;
	justify-content:center;
}

.rr-modal-overlay{
	position:absolute;
	inset:0;

	background:rgba(0,0,0,.7);

	backdrop-filter:blur(5px);

	z-index:1;
}

.rr-modal-contenido{
	position:relative !important;

	z-index:999999999 !important;

	width:90%;
	max-width:760px;

	background:#fff;

	border-radius:24px;

	padding:24px;

	max-height:90vh;

	overflow-y:auto;

	box-shadow:0 25px 80px rgba(0,0,0,.25);
}

.rr-modal-contenido h2{
	text-align:center;
	font-size:1.8rem;
	margin-bottom:20px;
	color:#111827;
}

.rr-cerrar-modal{
	position:absolute;
	top:15px;
	right:15px;

	width:40px;
	height:40px;

	border:none;

	border-radius:50%;

	background:#f3f4f6;

	cursor:pointer;

	font-size:22px;
	font-weight:bold;
}

body.rr-body-lock{
	overflow:hidden !important;
}

/* =====================================================
   FORMULARIO
===================================================== */

.rr-form{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;

	max-width:none;
}

.rr-form .rr-campo{
	margin:0;
}

.rr-form label{
	display:block;

	margin-bottom:3px;

	font-size:13px;

	font-weight:600;

	color:#111827;
}

.rr-form input,
.rr-form select,
.rr-form textarea{

	width:100%;

	padding:8px 10px;

	border:1px solid #d1d5db;

	border-radius:10px;

	font-size:14px;

	background:#fff;
}

.rr-form textarea{
	min-height:70px;
	resize:vertical;
}

.rr-campo-descripcion,
.rr-campo-habilidades,
.rr-campo-fotos,
.rr-mensaje{
	grid-column:1 / -1;
}

.rr-checkbox-grupo{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:8px;
}

.rr-checkbox{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:13px;
}

.rr-boton-enviar{
	grid-column:1 / -1;

	background:#2563eb;
	color:#fff;

	border:none;

	padding:12px;

	border-radius:10px;

	font-size:14px;
	font-weight:700;

	cursor:pointer;
}

.rr-mensaje{
	margin-top:8px;
	font-weight:600;
}

.rr-mensaje-exito{
	color:#16a34a;
}

.rr-mensaje-error{
	color:#dc2626;
}

/* =====================================================
   DIVI
===================================================== */

.et_pb_column .rr-card-formulario{
	height:100%;
}

.et_pb_column{
	display:flex;
}

.et_pb_column .et_pb_module{
	width:100%;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

	.rr-card-formulario{
		min-height:auto;
	}

	.rr-modal-contenido{
		width:calc(100% - 30px);
		padding:20px;
	}

	.rr-form{
		grid-template-columns:1fr;
	}

	.rr-checkbox-grupo{
		grid-template-columns:1fr;
	}
}

/* Cuando un modal está abierto */

body.rr-body-lock .et_pb_column,
body.rr-body-lock .et_pb_module,
body.rr-body-lock .rr-card-formulario{
	z-index:1 !important;
	position:relative;
}

body.rr-body-lock .rr-modal,
body.rr-body-lock .rr-modal *{
	z-index:999999999 !important;
}

/* =====================================
CENTROS DE AYUDA
===================================== */

/* GRID */
.rr-centros-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:32px;
    margin:40px 0;
}

/* TARJETA */
.rr-centro-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:32px;
    padding:28px;
    display:flex;
    flex-direction:column;
    min-height:520px;
    box-shadow:0 4px 18px rgba(0,0,0,.04);
}

/* BADGES */

.rr-centro-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    padding:12px 20px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    margin-bottom:24px;
}

.rr-acopio{
    background:#FFF3E7;
    color:#E86B12;
}

.rr-albergue{
    background:#E7F8EF;
    color:#12824C;
}

.rr-medica{
    background:#EEF4FF;
    color:#3366E8;
}

/* TITULO */

.rr-centro-card h3{
    font-size:28px;
    line-height:1.05;
    font-weight:700;
    color:#111827;
    margin:0 0 10px;
}

/* INFO */

.rr-centro-info{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.rr-centro-info p{
    margin:0;
    font-size:16px;
    color:#4b5563;
}

/* DESCRIPCION */

.rr-centro-descripcion{
    margin-top:14px;
    font-size:14px;
    line-height:1.7;
    color:#6b7280;
}

/* BOTON */

.rr-centro-btn{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    background:#07152F;
    color:#fff !important;
    text-decoration:none;
    padding:18px 34px;
    border-radius:20px;
    font-size:18px;
    font-weight:700;
    transition:.3s;
}

.rr-centro-btn:hover{
    transform:translateY(-2px);
    color:#fff !important;
}

/* RESPONSIVE */

@media(max-width:768px){

    .rr-centros-grid{
        grid-template-columns:1fr;
    }

    .rr-centro-card{
        min-height:auto;
    }

    .rr-centro-card h3{
        font-size:34px;
    }

    .rr-centro-info p{
        font-size:18px;
    }

    .rr-centro-descripcion{
        font-size:18px;
    }

    .rr-centro-btn{
        width:100%;
        font-size:18px;
    }
}