/* ========================================
   CONTACTO - Estilos para páginas de contacto
   ======================================== */
.contacto-container{padding-top:100px;padding-bottom:60px;max-width:1100px;margin:0 auto;padding-left:20px;padding-right:20px;height:auto!important;min-height:calc(100vh - 90px)}
/* Header de contacto */
.contacto-header{text-align:center;margin-bottom:50px}
.contacto-header h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--text-light);margin-bottom:15px;font-family: 'Geom'}
.contacto-header p{font-size:var(--font-size-lg);color:var(--text-secondary);max-width:600px;margin:0 auto}
/* Contenido principal */
.contacto-content{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start}
/* Tarjetas de información */
.contacto-info{display:flex;flex-direction:column;gap:20px}
.info-card{background:var(--bg-dark-two);border-radius:var(--border-radius-lg);padding:25px;text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.info-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.info-card-highlight{background:var(--bg-degradado)}
.info-card-highlight h3,.info-card-highlight p{color:var(--text-light)}
.info-icon{width:50px;height:50px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.info-icon svg{width:24px;height:24px;color:var(--color-primary)}
.info-card-highlight .info-icon{background:rgba(255,255,255,.2)}
.info-card-highlight .info-icon svg{color:var(--text-light)}
.info-card h3{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-light);margin-bottom:8px}
.info-card p{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.5}
/* Formulario */
.contacto-form-wrapper{background:var(--bg-dark-two);border-radius:var(--border-radius-lg);padding:35px}
.contacto-form{display:flex;flex-direction:column;gap:25px}
/* Display de usuario (página privada) */
.user-info-display{display:flex;align-items:center;gap:15px;padding:20px;background:rgba(255,255,255,.05);border-radius:var(--border-radius-md);margin-bottom:10px}
.user-avatar{width:50px;height:50px;background:var(--bg-degradado);border-radius:50%;display:flex;align-items:center;justify-content:center}
.user-avatar svg{width:24px;height:24px;color:var(--text-light)}
.user-details{flex:1}
.user-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-light);margin-bottom:3px}
.user-email{font-size:var(--font-size-sm);color:var(--text-secondary)}
/* Grupos del formulario */
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-light)}
.form-group .required{color:var(--color-danger)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--border-radius-md);color:var(--text-light);font-size:var(--font-size-base);transition:border-color .3s ease,background .3s ease}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary);background:rgba(255,255,255,.08)}
.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.form-group select option{background:var(--bg-dark);color:var(--text-light)}
.form-group textarea{resize:vertical;min-height:120px}
/* Checkbox de privacidad */
.form-privacy{margin-top:5px}
.checkbox-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--font-size-sm);color:var(--text-secondary)}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;margin-top:2px;cursor:pointer;accent-color:var(--color-primary)}
.checkbox-label a{color:var(--color-primary);text-decoration:underline}
.checkbox-label a:hover{color:var(--text-light)}
/* Botón de envío */
.btn-submit{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-top:10px}
.btn-submit svg{width:20px;height:20px}
.btn-submit:disabled{opacity:.6;cursor:not-allowed}
/* Mensaje del formulario */
.form-message{padding:15px 20px;border-radius:var(--border-radius-md);font-size:var(--font-size-sm);text-align:center}
.form-message.success{background:rgba(40,167,69,.15);border:1px solid var(--color-success);color:var(--color-success)}
.form-message.error{background:rgba(220,53,69,.15);border:1px solid var(--color-danger);color:var(--color-danger)}
/* Sección FAQ */
.contacto-faq{text-align:center;margin-top:60px;padding:40px;background:var(--bg-dark-two);border-radius:var(--border-radius-lg)}
.contacto-faq h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-light);margin-bottom:15px}
.contacto-faq p{color:var(--text-secondary)}
.contacto-faq a{color:var(--color-primary);text-decoration:underline}
.contacto-faq a:hover{color:var(--text-light)}
/* Alternativas de ayuda (página privada) */
.contacto-alternatives{margin-top:60px}
.contacto-alternatives h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-light);margin-bottom:25px;text-align:center}
.alternatives-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.alternative-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 20px;background:var(--bg-dark-two);border-radius:var(--border-radius-lg);transition:transform .3s ease,background .3s ease}
.alternative-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.08)}
.alternative-card svg{width:40px;height:40px;color:var(--color-primary);margin-bottom:15px}
.alternative-card h3{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-light);margin-bottom:8px}
.alternative-card p{font-size:var(--font-size-sm);color:var(--text-secondary)}
/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width:900px){.contacto-content{grid-template-columns:1fr;gap:30px}.contacto-info{order:2;flex-direction:row;flex-wrap:wrap}.contacto-form-wrapper{order:1}.info-card{flex:1 1 calc(33.333% - 15px);min-width:150px}}
@media (max-width:768px){.contacto-container{padding-top:80px;padding-bottom:100px}.contacto-header{margin-bottom:30px}.contacto-header h1{font-size:var(--font-size-xl)}.contacto-header p{font-size:var(--font-size-base)}.contacto-info{flex-direction:column;order:2}.info-card{flex:1 1 100%}.contacto-form-wrapper{padding:25px 20px;order:1}.alternatives-grid{grid-template-columns:1fr}.contacto-faq{padding:30px 20px}}
@media (max-width:480px){.contacto-header h1{font-size:1.4rem}.user-info-display{flex-direction:column;text-align:center}.form-group input,.form-group select,.form-group textarea{padding:12px 14px}.btn-submit{width:100%}}
/* Página privada - ajustes específicos */
.contacto-private .contacto-header h1{font-size:var(--font-size-xl)}
@media (max-width:768px){.contacto-private .contacto-header h1{font-size:1.3rem}}
/* ========================================
   HISTORIAL DE MENSAJES
   ======================================== */
.mensajes-historial{margin-top:50px;background:var(--bg-dark-two);border-radius:var(--border-radius-lg);padding:30px}
.historial-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}
.historial-header h2{display:flex;align-items:center;gap:10px;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-light)}
.historial-header h2 svg{width:22px;height:22px;color:var(--color-primary)}
.btn-refresh{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:rgba(255,255,255,.05);border-radius:50%;transition:all .3s ease}
.btn-refresh:hover{background:rgba(255,255,255,.1)}
.btn-refresh svg{width:18px;height:18px;color:var(--text-secondary)}
.btn-refresh.loading svg{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Lista de mensajes */
.mensajes-lista{display:flex;flex-direction:column;gap:12px}
.mensajes-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--text-secondary)}
.mensajes-loading svg.spin{animation:spin 1s linear infinite}
.mensajes-empty{text-align:center;padding:40px 20px;color:var(--text-secondary)}
.mensajes-empty svg{width:48px;height:48px;margin-bottom:15px;opacity:.5}
.mensajes-empty p{font-size:var(--font-size-sm)}
/* Tarjeta de mensaje individual */
.mensaje-item{display:flex;align-items:center;gap:15px;padding:18px 20px;background:rgba(255,255,255,.03);border-radius:var(--border-radius-md);border:1px solid rgba(255,255,255,.05);cursor:pointer;transition:all .2s ease}
.mensaje-item:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.mensaje-item.tiene-respuesta{border-left:3px solid var(--color-success)}
.mensaje-item.sin-respuesta{border-left:3px solid var(--color-warning)}
.mensaje-info{flex:1;min-width:0}
.mensaje-asunto{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--text-light);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mensaje-meta{display:flex;align-items:center;gap:12px;font-size:var(--font-size-xs);color:var(--text-muted)}
.mensaje-fecha{display:flex;align-items:center;gap:4px}
.mensaje-fecha svg{width:12px;height:12px}
/* Badges de estado */
.mensaje-badges{display:flex;gap:8px;flex-shrink:0}
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}
.badge svg{width:12px;height:12px}
.badge-pendiente{background:rgba(255,193,7,.15);color:var(--color-warning)}
.badge-leido{background:rgba(0,123,255,.15);color:var(--color-primary)}
.badge-respondido{background:rgba(40,167,69,.15);color:var(--color-success)}
.badge-sin-respuesta{background:rgba(108,117,125,.15);color:var(--text-muted)}
.mensaje-arrow{color:var(--text-muted);flex-shrink:0}
.mensaje-arrow svg{width:18px;height:18px}
/* ========================================
   MODAL DE DETALLE DE MENSAJE
   ======================================== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-content.modal-mensaje{background:var(--bg-dark-two);border-radius:var(--border-radius-lg);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:15px;right:15px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border-radius:50%;color:var(--text-secondary);transition:all .2s ease;z-index:1}
.modal-close:hover{background:rgba(255,255,255,.1);color:var(--text-light)}
.modal-close svg{width:20px;height:20px}
.modal-mensaje-header{padding:30px 30px 20px;border-bottom:1px solid rgba(255,255,255,.05)}
.modal-mensaje-header h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-light);margin-bottom:12px;padding-right:40px}
.modal-mensaje-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.modal-mensaje-meta .meta-fecha{font-size:var(--font-size-sm);color:var(--text-secondary)}
.modal-mensaje-meta .meta-estado{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}
.modal-mensaje-body{padding:25px 30px 30px}
.mensaje-seccion{margin-bottom:25px}
.mensaje-seccion:last-child{margin-bottom:0}
.mensaje-seccion h3{display:flex;align-items:center;gap:8px;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-secondary);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
.mensaje-seccion h3 svg{width:16px;height:16px}
.mensaje-contenido{background:rgba(255,255,255,.03);border-radius:var(--border-radius-md);padding:18px 20px;font-size:var(--font-size-sm);color:var(--text-primary);line-height:1.7;white-space:pre-wrap;word-break:break-word}
.mensaje-contenido.respuesta{background:rgba(40,167,69,.08);border-left:3px solid var(--color-success)}
.respuesta-fecha{margin-top:10px;font-size:var(--font-size-xs);color:var(--text-muted);text-align:right}
/* Aviso de mensaje pendiente */
.pendiente-aviso{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:rgba(255,193,7,.1);border-radius:var(--border-radius-md);border:1px solid rgba(255,193,7,.2)}
.pendiente-aviso svg{width:20px;height:20px;color:var(--color-warning);flex-shrink:0;margin-top:2px}
.pendiente-aviso p{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.5}
/* ========================================
   RESPONSIVE - HISTORIAL Y MODAL
   ======================================== */
@media (max-width:768px){.mensajes-historial{padding:20px;margin-top:40px}.historial-header h2{font-size:var(--font-size-base)}.mensaje-item{flex-wrap:wrap;padding:15px}.mensaje-badges{width:100%;margin-top:10px}.mensaje-arrow{display:none}.modal-content.modal-mensaje{max-height:85vh}.modal-mensaje-header{padding:25px 20px 15px}.modal-mensaje-header h2{font-size:var(--font-size-base)}.modal-mensaje-body{padding:20px}}
@media (max-width:480px){.mensaje-meta{flex-direction:column;align-items:flex-start;gap:6px}.badge{padding:3px 8px;font-size:10px}}
/* ========================================
   HILO DE CONVERSACIÓN (MODAL)
   ======================================== */
.modal-content.modal-mensaje{overflow-y:hidden;display:flex;flex-direction:column;max-height:90vh}
.modal-mensaje-body{flex:1;overflow-y:hidden;display:flex;flex-direction:column;padding:20px 30px 0}
/* Contenedor scrollable del hilo */
.hilo-conversacion{flex:1;overflow-y:auto;padding:10px 0 15px;display:flex;flex-direction:column;gap:14px;min-height:120px;max-height:calc(90vh - 220px)}
.hilo-conversacion::-webkit-scrollbar{width:5px}
.hilo-conversacion::-webkit-scrollbar-track{background:transparent}
.hilo-conversacion::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
/* Cargando hilo */
.hilo-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:30px;color:var(--text-secondary);font-size:var(--font-size-sm)}
.hilo-loading svg.spin{animation:spin 1s linear infinite;width:18px;height:18px}
.hilo-error{text-align:center;color:var(--color-danger);font-size:var(--font-size-sm);padding:20px}
/* Wrapper de cada burbuja */
.burbuja-wrapper{display:flex;flex-direction:column;max-width:85%}
.burbuja-wrapper-usuario{align-self:flex-end;align-items:flex-end}
.burbuja-wrapper-admin{align-self:flex-start;align-items:flex-start}
/* Etiqueta sobre la burbuja */
.burbuja-etiqueta{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:var(--font-weight-medium);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
.burbuja-etiqueta svg{width:11px;height:11px}
.etiqueta-usuario{color:var(--color-primary)}
.etiqueta-admin{color:var(--color-success)}
/* Burbujas de chat */
.burbuja{padding:12px 16px;border-radius:var(--border-radius-md);font-size:var(--font-size-sm);line-height:1.65;word-break:break-word;white-space:pre-wrap}
.burbuja-usuario{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-bottom-right-radius:4px}
.burbuja-admin{background:rgba(40,167,69,.1);border:1px solid rgba(40,167,69,.2);border-bottom-left-radius:4px;color:var(--text-light)}
/* Fecha debajo de la burbuja */
.burbuja-fecha{font-size:10px;color:var(--text-muted);margin-top:4px}
/* Aviso de pendiente dentro del hilo */
.hilo-pendiente{display:flex;align-items:center;gap:10px;padding:14px 16px;background:rgba(255,193,7,.08);border-radius:var(--border-radius-md);border:1px solid rgba(255,193,7,.15);align-self:center;max-width:90%}
.hilo-pendiente svg{width:16px;height:16px;color:var(--color-warning);flex-shrink:0}
.hilo-pendiente p{font-size:var(--font-size-xs);color:var(--text-secondary);line-height:1.5}
/* Formulario de reply */
.hilo-reply-form{padding:15px 0 20px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.hilo-reply-form textarea{width:100%;padding:12px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--border-radius-md);color:var(--text-light);font-size:var(--font-size-sm);resize:none;transition:border-color .2s ease;font-family:inherit}
.hilo-reply-form textarea::placeholder{color:var(--text-muted)}
.hilo-reply-form textarea:focus{outline:none;border-color:var(--color-primary);background:rgba(255,255,255,.07)}
.hilo-reply-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px}
.hilo-reply-chars{font-size:var(--font-size-xs);color:var(--text-muted)}
.hilo-reply-actions{display:flex;align-items:center;gap:10px}
.hilo-reply-error{font-size:var(--font-size-xs);color:var(--color-danger)}
.btn-reply{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;font-size:var(--font-size-sm)}
.btn-reply svg{width:16px;height:16px}
.btn-reply:disabled{opacity:.6;cursor:not-allowed}
.badge-archivado{background:rgba(108,117,125,.15);color:var(--text-muted)}
/* Responsive hilo */
@media (max-width:768px){.modal-mensaje-body{padding:15px 20px 0}.hilo-reply-form{padding:12px 0 15px}.hilo-conversacion{max-height:calc(85vh - 220px)}.burbuja-wrapper{max-width:92%}}
@media (max-width:480px){.modal-content.modal-mensaje{max-height:95vh;border-radius:var(--border-radius-md) var(--border-radius-md) 0 0;align-self:flex-end;margin-bottom:0}.hilo-conversacion{max-height:calc(95vh - 240px)}}