/* assets/estilos.css - V7.1 Fix Visual */

.gpg-muro-container {
    background: #ffffff;
    border: 1px solid #e2e4e7;
    padding: 40px;
    max-width: 450px;
    margin: 50px auto;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.gpg-header h3 { margin-top: 0; color: #1d2327; font-size: 1.6em; margin-bottom: 10px; font-weight: 700; }
.gpg-header p { color: #646970; font-size: 15px; margin-bottom: 25px; line-height: 1.5; }

.gpg-field { margin-bottom: 20px; text-align: left; } /* Un poco más de aire */
.gpg-field label { display: block; font-weight: 600; margin-bottom: 8px; color: #3c434a; font-size: 14px; }

/* INPUTS ESTÁNDAR */
.gpg-input {
    width: 100%; 
    padding: 12px; 
    border: 1px solid #d0d7de; 
    border-radius: 8px; 
    font-size: 16px;
    box-sizing: border-box; 
    transition: all 0.2s; 
    background: #fff; 
    color: #333;
    height: 48px; /* Altura fija para que coincidan */
}
.gpg-input:focus, .gpg-select-country:focus { 
    border-color: #2271b1; 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1); 
}

/* GRUPO DE TELÉFONO (FLEXBOX) */
.gpg-phone-group { 
    display: flex; 
    gap: 10px; /* Espacio entre el select y el input */
    align-items: stretch; /* Estira los hijos para que tengan la misma altura */
}

/* EL SELECTOR DE PAÍS */
.gpg-select-country { 
    width: 45%; /* Un poco más ancho para que quepa "Ecuador (+593)" */
    padding: 0 10px; /* Padding lateral */
    border: 1px solid #d0d7de; 
    border-radius: 8px; 
    background: #f6f8fa; 
    cursor: pointer; 
    font-size: 14px; /* Un poco más chico para que entre texto largo */
    height: 48px; /* Altura idéntica al input */
    color: #333;
    /* Resetear estilos feos de navegador */
    appearance: none; 
    -webkit-appearance: none; 
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-right: 25px; /* Espacio para la flechita */
}

.gpg-input-phone { 
    flex-grow: 1; /* Ocupa el resto del espacio */
    width: auto;
}

/* BOTONES Y ALERTAS */
.gpg-submit {
    width: 100%; background: #2271b1; color: #ffffff; border: none; padding: 14px; font-size: 16px;
    font-weight: 600; cursor: pointer; border-radius: 8px; margin-top: 15px; transition: background 0.2s;
}
.gpg-submit:hover { background: #135e96; transform: translateY(-1px); }

.gpg-alerta { padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; text-align: left; }
.gpg-error { background: #fff0f0; color: #d63638; border: 1px solid #ffcccc; }
.gpg-success { background: #dafbe1; color: #1a7f37; border: 1px solid #b4f1c4; }

.gpg-switch { margin-top: 25px; font-size: 14px; color: #50575e; border-top: 1px solid #eee; padding-top: 15px; }
.gpg-link { color: #2271b1; text-decoration: none; font-weight: 600; cursor: pointer; }
.gpg-hidden { display: none !important; }

/* ESTILOS DEL DASHBOARD (Se mantienen) */
/* ... (puedes dejar el resto de tu CSS de admin aquí abajo) ... */

/* --- 2. ESTILOS BACKEND (Admin Dashboard) --- */

/* Tarjetas de Métricas */
.gpg-alert-deck { display: flex; gap: 15px; margin-bottom: 20px; margin-top: 20px; }
.gpg-card {
    flex: 1; background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #e2e4e7;
    display: flex; align-items: center; gap: 15px; transition: transform 0.2s, box-shadow 0.2s;
}
.gpg-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-number { font-size: 28px; font-weight: 800; line-height: 1; }
.card-label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #646970; letter-spacing: 0.5px; }

.card-neutral { border-left: 4px solid #2271b1; } .card-neutral .card-number { color: #2271b1; }
.card-success { border-left: 4px solid #1a7f37; } .card-success .card-number { color: #1a7f37; }
.card-danger { border-left: 4px solid #d63638; background: #fff8f8; } .card-danger .card-number { color: #d63638; }

/* Barra de Herramientas */
.gpg-toolbar {
    background: #fff; padding: 15px 20px; border: 1px solid #e2e4e7; margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.gpg-rounded-input { border-radius: 8px !important; border: 1px solid #ccc; padding: 6px 10px !important; }
.gpg-btn-round { border-radius: 20px !important; padding: 4px 15px !important; font-weight: 600 !important; }

/* Tabla y Pestañas */
.gpg-nav-tab-wrapper { border-bottom: none !important; margin-bottom: 15px; display:flex; gap:5px; }
.gpg-tab-round {
    border-radius: 8px 8px 0 0 !important; margin-right: 5px !important; background: #f0f0f1; border: 1px solid transparent;
    padding: 8px 15px; text-decoration: none; color: #555; font-weight: 600;
}
.gpg-tab-round.active { background: #fff; color: #2271b1; border: 1px solid #e2e4e7; border-bottom: 1px solid #fff; }
.gpg-panel-round { background: #fff; border-radius: 12px; border: 1px solid #e2e4e7; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }

/* Acciones en Tabla */
.gpg-btn-icon {
    width: 30px; height: 30px; padding: 0 !important; display: inline-flex !important;
    align-items: center; justify-content: center; border-radius: 6px !important;
}
.gpg-btn-icon:hover { background-color: #f0f0f1; }

/* Modal Edición */
.gpg-modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); }
.gpg-modal-content {
    background: #fff; margin: 10vh auto; padding: 30px; border-radius: 16px; width: 500px; max-width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); position: relative; animation: slideDown 0.3s ease;
}
.gpg-close { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #999; }
@keyframes slideDown { from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);} }