/* ========================================================= CSS MODERNO – AISLADO PARA PÁGINAS NUEVAS SOLO ACTIVO CON ========================================================= */ /* ===== BASE ===== */ .app-modern * { box-sizing: border-box; font-family: "Calibri", "Segoe UI", Arial, sans-serif; } .app-modern html, .app-modern body { height: 100%; margin: 0; } .app-modern body { background: #eef1f7; color: #222; font-size: 18px; } /* ===== APP LAYOUT (GRID ÚNICO) ===== */ .app-modern .app { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; } /* ===== TOPBAR (FIJO) ===== */ .app-modern .topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: #ffffff; border-bottom: 1px solid #dcdfe6; display: flex; justify-content: flex-end; align-items: center; padding: 0 24px; font-size: 18px; z-index: 200; } .app-modern .topbar a { color: #1a3a6c; text-decoration: none; } /* ===== SIDEBAR (FIJA) ===== */ .app-modern .sidebar { position: fixed; top: 52px; /* debajo del header */ left: 0; bottom: 44px; /* encima del footer */ width: 240px; background: #163a6b; color: #ffffff; padding: 24px 0; overflow-y: auto; z-index: 150; } .app-modern .sidebar-header { text-align: center; margin-bottom: 32px; } .app-modern .sidebar-header img { width: 64px; margin-bottom: 12px; } .app-modern .sidebar-header div { font-size: 18px; font-weight: bold; } .app-modern .sidebar a { display: flex; align-items: center; gap: 14px; padding: 14px 26px; color: #ffffff; text-decoration: none; font-size: 18px; } .app-modern .sidebar a i { width: 22px; font-size: 18px; } .app-modern .sidebar a:hover { background: rgba(255, 255, 255, 0.15); } /* ===== MAIN CONTENT ===== */ .app-modern .main-content { grid-column: 2; grid-row: 2; padding: 52px 10px 40px 10px; /* sin padding arriba */ display: flex; justify-content: center; align-items: flex-start; position: relative; /* CLAVE para la marca de agua */ overflow: hidden; } /* ===== MARCA DE AGUA SCR ===== */ .app-modern .main-content::before { content: ""; position: absolute; inset: 0; background-image: url("/casino/images/logocasino_watermark.png"); background-repeat: space; background-position: center 35%; background-size: 25%; opacity: 0.24; /* SOLO afecta al logo */ pointer-events: none; /* No bloquea clics */ z-index: 0; } /* Asegurar que el contenido quede por encima */ .app-modern .main-content>* { position: relative; z-index: 1; } /* ===== DASHBOARD / CONTENT CARD ===== */ .app-modern .dashboard-card { background: #ffffff; width: 100%; max-width: 900px; padding: 50px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); text-align: center; } /* ===== DASHBOARD TEXT ===== */ .app-modern .dashboard-date { font-size: 28px; font-weight: bold; color: #1a3a6c; margin-bottom: 10px; text-transform: capitalize; } .app-modern .dashboard-time { font-size: 48px; font-weight: bold; color: #1a3a6c; } .app-modern .dashboard-note { margin-top: 40px; font-size: 14px; color: #999; letter-spacing: 1px; } /* ===== FOOTER ===== */ .app-modern .footer { text-align: center; padding: 0px 0; font-size: 14px; color: #666; } .app-modern .footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 44px; background: #ffffff; border-top: 1px solid #dcdfe6; text-align: center; line-height: 44px; font-size: 14px; color: #666; z-index: 100; } /* ===== SOCIOS ===== */ .app-modern .section-title { margin-top: 0; margin-bottom: 24px; font-size: 24px; color: #1a3a6c; } .app-modern .search-form label { font-size: 18px; } .app-modern .search-form input[type="text"], .app-modern .search-form select { width: 50%; padding: 6px; margin: 6px 8px; font-size: 18px; } .app-modern .filters { display: grid; grid-template-columns: 1fr 1fr auto; gap: 24px; margin-top: 20px; align-items: end; } .app-modern .btn-primary { background: #1a3a6c; color: #fff; border: none; padding: 12px 20px; cursor: pointer; font-size: 18px; } .app-modern .btn-primary:hover { background: #274b87; } /*AÑADIDO PARA MEJORAR SOCIOS.PHP*/ .socios-search { max-width: 800px; margin: 0 auto 12px; padding: 8px 10px; background: #f2f2f2; border: 1px solid #d0d0d0; border-radius: 4px; } /* ===== SOCIOS – FORMULARIO ===== */ .app-modern .filters-row { display: flex; justify-content: center; align-items: center; gap: 32px; margin-top: 0px; } .app-modern .radio-group { display: flex; gap: 20px; align-items: center; } .app-modern .radio-group label { font-size: 18px; } .app-modern .select-group { display: flex; align-items: center; gap: 0px; } .app-modern .select-group label { font-size: 18px; white-space: nowrap; margin-right: 8px; } .app-modern .select-group select { width: 200px; padding: 2px; font-size: 18px; } .app-modern .submit-row { margin-top: 12px; display: flex; justify-content: center; } /*MEJORA LISTADO EN CONSULTA SOCIOS*/ /* ===== RESULTADOS SOCIOS ===== */ .results-list { max-width: 320px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 6px; } .results-list .result-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #f2f2f2; border: 1px solid #dcdcdc; border-radius: 3px; /*font-size: 0.9rem;*/ cursor: pointer; text-align: left; text-decoration: none; /* quita subrayado */ color: inherit; /* hereda color del texto */ } .results-list .result-item i { color: #163a6b; font-size: 0.85rem; opacity: 0.6; transition: transform 0.15s ease, opacity 0.15s ease; opacity: 0.6; } .results-list .result-item:hover { background: #e9f0fa; border-color: #163a6b; text-decoration: none; transform: translateX(4px); } .results-list .result-item:hover i { transition: transform 0.15s ease; opacity: 1; } .result-item:focus { outline: 2px solid #163a6b; outline-offset: 2px; } /* ===== TABLAS (SOLO EN APP MODERNA) ===== */ .app-modern table { border-collapse: collapse; } .app-modern #cuerpoN td, .app-modern #cuerpoBB { padding: 8px 10px; font-size: 18px; vertical-align: middle; } .app-modern #cuerpoBB { background: #1a3a6c !important; color: #ffffff; font-weight: bold; } .app-modern tr[bgcolor="#cccccc"] td { background-color: #f2f4f8 !important; } .app-modern tr[bgcolor="#ffffff"] td { background-color: #ffffff !important; } .app-modern tr.resaltar td, .app-modern tr:hover td { background-color: #e9eef7 !important; } /* ====================================================== TABLA RECIBOS – CABECERA ====================================================== */ .app-modern form#cobro thead tr td { background: #163a6b !important; /* azul casino */ color: #ffffff !important; font-weight: 600; font-size: 14px; text-align: center; white-space: nowrap; padding: 10px 12px; } /* evitar hover en cabecera */ .app-modern form#cobro thead tr:hover td { background: #163a6b !important; } /* ====================================================== TABLA RECIBOS – CABECERA - DUPLICADOS ====================================================== */ .app-modern form#anulcobro thead tr td { background: #FFCC33 !important; color: #000 !important; font-weight: 600; font-size: 14px; text-align: center; white-space: nowrap; padding: 10px 12px; } /* evitar hover en cabecera */ .app-modern form#anulcobro thead tr:hover td { background: #FFCC33 !important; } /* hover en listado */ .app-modern form#anulcobro tbody tr:hover td { background: #f3e8c4 !important; } /* ====================================================== TABLA RECIBOS – CABECERA - COBROS ====================================================== */ .app-modern form#cobro2 thead tr td { background: #1a3a6c !important; color: #ffffff !important; font-weight: 600; font-size: 14px; text-align: center; white-space: nowrap; padding: 10px 12px; } /* evitar hover en cabecera */ .app-modern form#cobro2 thead tr:hover td { background: #1a3a6c !important; } /* hover en listado */ .app-modern form#cobro2 tbody tr:hover td { background: #f3e8c4 !important; } /* ===== BOTONES LEGACY (SOLO EN APP MODERNA) ===== */ .app-modern #cuerpoN, .app-modern #cuerpoR { background: #1a3a6c; color: #ffffff; border: none; border-radius: 6px; padding: 8px 14px; font-size: 18px; cursor: pointer; } .app-modern #cuerpoR { background: #8b1e1e; } .app-modern #cuerpoN:hover { background: #274b87; } .app-modern #cuerpoR:hover { background: #a62828; } .legacy-wrapper { width: 100%; max-width: 1100px; } /* ====================================================== LEGACY WRAPPER – CONTENIDO ANTIGUO (socio_ficha.php) ====================================================== */ .legacy-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; } /* ====================================================== AISLAMIENTO TOTAL DE socio_ficha.php (LEGACY) ====================================================== */ .app-modern .legacy-wrapper { padding: 20px; box-sizing: border-box; } /* Anular interferencias modernas */ .app-modern .legacy-wrapper * { box-sizing: content-box; } /* Recuperar comportamiento original de IDs legacy */ .app-modern .legacy-wrapper #cuerpo, .app-modern .legacy-wrapper #cuerpoN, .app-modern .legacy-wrapper #cuerpoR, .app-modern .legacy-wrapper #cuerpoBB { all: unset; } /* Mantener tablas clásicas estables */ .app-modern .legacy-wrapper table { border-collapse: separate; margin-left: auto; margin-right: auto; } /* Evitar que el layout moderno afecte a formularios antiguos */ .app-modern .legacy-wrapper form { display: block; } /* ====================================================== CONTENEDOR VISUAL SUAVE PARA LEGACY (socio_ficha) ====================================================== */ .app-modern .legacy-wrapper { background: #ffffff; border-radius: 6px; padding: 0 10px 40px 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); } /* ====================================================== AJUSTE CABECERA TABLA RECIBOS (LEGACY) ====================================================== */ /* Cabecera azul: separar textos y centrar */ .legacy-wrapper #cuerpoBB { padding: 10px 12px; font-size: 16px; font-weight: 600; text-align: center; white-space: nowrap; } /* Asegurar que cada celda de cabecera se vea independiente */ .legacy-wrapper tr:first-child td#cuerpoBB { border-right: 1px solid rgba(255, 255, 255, 0.25); } /* Quitar borde del último */ .legacy-wrapper tr:first-child td#cuerpoBB:last-child { border-right: none; } /* ====================================================== ACCIONES DEL SOCIO – BARRA HORIZONTAL ====================================================== */ .app-modern .acciones-socio { display: flex; align-items: stretch; /* Estira los hijos */ background: #163a6b; border-radius: 3px; overflow: hidden; margin: 0; } /* Eliminar margen por defecto del form (CLAVE) */ .app-modern .acciones-socio>form { display: flex; margin: 0; } /* Botones */ .app-modern .acciones-socio .accion-socio { display: flex; align-items: center; /* Centra contenido */ gap: 8px; padding: 20px 16px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; color: #ffffff; text-decoration: none; white-space: nowrap; cursor: pointer; background: transparent; border: none; border-right: 1px solid rgba(255, 255, 255, 0.15); box-sizing: border-box; } /* Quitar separador del último */ .app-modern .acciones-socio .accion-socio:last-child { border-right: none; } /* Hover */ .app-modern .acciones-socio .accion-socio:hover { background: #1f4a85; } /* Iconos */ .app-modern .acciones-socio .accion-socio i { font-size: 14px; } /* Acción peligrosa */ .app-modern .acciones-socio .accion-socio.peligro { background: #8b1e1e; } .app-modern .acciones-socio .accion-socio.peligro:hover { background: #a62828; } /* ====================================================== ACCIONES DE RECIBOS – BARRA HORIZONTAL (DEFINITIVO) ====================================================== */ .app-modern .acciones-recibos { display: flex; align-items: center; min-height: 30px; background: #163a6b; /* azul casino */ border-radius: 0; /* sin redondeos */ overflow: hidden; margin: 0; max-width: 1100px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .app-modern .acciones-recibos .accion-recibo { all: unset; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 30px; border-right: 1px solid rgba(255, 255, 255, 0.15); } .app-modern .acciones-recibos .accion-recibo:disabled { pointer-events: none; opacity: 0.4; cursor: not-allowed; } .app-modern .acciones-recibos .accion-recibo:disabled:hover { background: inherit; } .app-modern .acciones-recibos .accion-recibo:last-child { border-right: none; } .app-modern .acciones-recibos .accion-recibo:hover { background: #1f4a85; } .app-modern .acciones-recibos .accion-recibo i { font-size: 14px; } .app-modern .acciones-recibos .accion-recibo.peligro { background: #8b1e1e; } .app-modern .acciones-recibos .accion-recibo.peligro:hover { background: #a62828; } /* ====================================================== TABLA RECIBOS – CABECERA ====================================================== */ .app-modern form#cobro thead tr td { background: #163a6b !important; /* azul casino */ color: #ffffff !important; font-weight: 600; font-size: 14px; text-align: center; white-space: nowrap; padding: 10px 12px; } /* evitar hover en cabecera */ .app-modern form#cobro thead tr:hover td { background: #163a6b !important; } .app-modern form#cobro table { margin-top: 0; border-radius: 0px; overflow: hidden; width: 100% !important; } .app-modern .bloque-recibos { width: 100%; max-width: 1100px; margin: 32px auto 0 auto; } .app-modern .acciones-recibos .accion-recibo:last-child { border-right: none; } .app-modern .acciones-recibos .accion-recibo:hover { background: #1f4a85; } .app-modern .acciones-recibos .accion-recibo.peligro { background: #8b1e1e; } .app-modern .acciones-recibos .accion-recibo.peligro:hover { background: #a62828; } .app-modern .bloque-recibos table { margin: 0; width: 100% !important; border-collapse: collapse; } .app-modern .bloque-recibos thead td { background: #163a6b !important; color: #ffffff !important; font-weight: 600; font-size: 14px; padding: 10px 12px; text-align: center; white-space: nowrap; } .app-modern .bloque-recibos thead tr:hover td { background: #163a6b !important; } .app-modern .acciones-recibos { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } /* Protección: evitar que cuerpoN afecte a tablas */ table#cuerpoN { all: unset; } .contador-recibos { pointer-events: none; align-items: center; /* gap: 8px;*/ margin: 1rem; font-weight: 600; color: var(--color-acento, #fff); } /* ====================================================== AUTH – LOGIN / RECUPERAR CONTRASEÑA ====================================================== */ .app-modern .auth-wrapper { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #eef1f7; } .app-modern .auth-card { background: #ffffff; width: 100%; max-width: 420px; padding: 40px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .app-modern .auth-card h1 { margin-top: 0; margin-bottom: 24px; font-size: 26px; color: #1a3a6c; text-align: center; } .app-modern .auth-card .form-row { margin-bottom: 18px; } .app-modern .auth-card label { display: block; margin-bottom: 6px; font-size: 16px; } .app-modern .auth-card input[type="text"], .app-modern .auth-card input[type="password"], .app-modern .auth-card input[type="email"] { width: 100%; padding: 10px; font-size: 16px; } .app-modern .auth-card .auth-links { margin-top: 20px; text-align: center; } .app-modern .auth-card .auth-links a { color: #1a3a6c; text-decoration: none; font-size: 14px; } .app-modern .auth-card .auth-links a:hover { text-decoration: underline; } /* CONTENEDOR PRINCIPAL */ .datos-socio { max-width: 1100px; margin: 0 auto 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; } /* FILA SUPERIOR: nombre + meta */ .socio-top { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 4px 6px; background: #f2f2f2; border-radius: 3px; border: 1px solid #d0d0d0; margin: 8px 0 6px; } /* NOMBRE */ .socio-header h2 { margin: 0; font-size: 1.4rem; color: #163a6b; } /* META SOCIO: UNA LÍNEA, COMPACTO */ .socio-meta { font-size: 0.85rem; color: #163a6b; line-height: 1.2; text-align: right; /* como pedías */ } /* FECHA DE BAJA EN ROJO SUAVE */ .socio-meta .baja-fecha { color: #a94442; /* rojo suave, no agresivo */ } /* BLOQUES */ .socio-bloque { background: #fff; padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px; } .socio-bloque h3 { background: #f2f2f2; /* Compensar el padding del bloque padre */ margin: -8px -10px 6px -10px; padding: 2px 6px; font-size: 0.95rem; font-weight: 600; line-height: 1.1; border: 1px solid #e0e0e0; border-bottom: 1px solid #d0d0d0; color: #163a6b; border-radius: 4px 4px 0 0; } /* TEXTO */ .socio-bloque p { margin: 2px 0; font-size: 0.85rem; line-height: 1.25; } /* BLOQUES A ANCHO COMPLETO */ .socio-bloque.full-width { grid-column: 1 / -1; } /* OBSERVACIONES */ .socio-bloque.observaciones { padding: 6px 10px; } /* RESPONSIVE */ @media (max-width: 768px) { .datos-socio { grid-template-columns: 1fr; } }