/* Estilos compartidos por los mantenimientos y reportes de web_eventos. Complementa (no reemplaza) a estilos.css. Paleta tomada de la caratula del proyecto: blanco, azul marino oscuro, granate/rojo intenso, salmon y azul medio. Soporta modo claro (por defecto) y modo oscuro mediante el atributo data-theme en . */ :root { --ev-bg-1: #ffffff; --ev-bg-2: #f7f7f9; --ev-bg-3: #f0eeec; --ev-panel: #ffffff; --ev-panel-2: #f5f2f1; --ev-border: #ddd7d3; --ev-primary: #1b3a5c; /* azul marino oscuro */ --ev-primary-dark: #142c46; --ev-accent: #8b1a2d; /* granate / rojo intenso */ --ev-accent-dark: #6e1523; --ev-salmon: #d48c86; --ev-blue-med: #6b96bf; --ev-white: #ffffff; --ev-text: #1a1a1a; --ev-text-muted: #5f6b7a; --ev-danger: #8b1a2d; --ev-danger-dark: #6e1523; --ev-gris-bg: #e7e3e0; --ev-gris-text: #1a1a1a; --ev-gris-hover: #d8d3cf; --ev-ok-bg: #eaf5ee; --ev-ok-text: #1e6b3a; --ev-ok-border: #a9d9bb; --ev-err-bg: #fbe9ea; --ev-err-text: #8b1a2d; --ev-err-border: #e3b3ba; --ev-toggle-bg: #1b3a5c; --ev-toggle-text: #ffffff; } :root[data-theme="oscuro"] { --ev-bg-1: #0a1420; --ev-bg-2: #0d1b2e; --ev-bg-3: #122238; --ev-panel: #142639; --ev-panel-2: #182c42; --ev-border: #24405e; --ev-primary: #6b96bf; /* azul medio, actua como acento principal en oscuro */ --ev-primary-dark: #4f7aa3; --ev-accent: #d1495f; /* granate aclarado para contraste sobre fondo oscuro */ --ev-accent-dark: #a83249; --ev-salmon: #e3a29c; --ev-blue-med: #86aed6; --ev-white: #f5f8fc; --ev-text: #e7edf5; --ev-text-muted: #94a7bf; --ev-danger: #d1495f; --ev-danger-dark: #a83249; --ev-gris-bg: #22364c; --ev-gris-text: #f5f8fc; --ev-gris-hover: #2c4460; --ev-ok-bg: #103524; --ev-ok-text: #b7f5cf; --ev-ok-border: #1f6b47; --ev-err-bg: #3a1418; --ev-err-text: #ffc9c9; --ev-err-border: #7a3040; --ev-toggle-bg: #d1495f; --ev-toggle-text: #ffffff; } body { background: linear-gradient(160deg, var(--ev-bg-1) 0%, var(--ev-bg-2) 55%, var(--ev-bg-3) 100%); color: var(--ev-text); transition: background-color .2s ease, color .2s ease; } .titulo { color: var(--ev-primary); letter-spacing: .3px; } .normal_gris { color: var(--ev-text-muted); } .ev-contenedor { width: 96%; margin: 10px auto; font-family: "Segoe UI", Arial, Helvetica, sans-serif; background: var(--ev-panel); color: var(--ev-text); border: 1px solid var(--ev-border); border-top: 3px solid var(--ev-accent); border-radius: 8px; padding: 16px 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); } :root[data-theme="oscuro"] .ev-contenedor { box-shadow: 0 8px 24px rgba(0,0,0,0.45); } .ev-toolbar { margin: 8px 0 12px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ev-toolbar input[type=text], .ev-toolbar select { font-size: 13px; padding: 6px 8px; background: var(--ev-bg-2); border: 1px solid var(--ev-border); color: var(--ev-text); border-radius: 4px; } .ev-toolbar input[type=text]:focus, .ev-toolbar select:focus, .ev-form input:focus, .ev-form select:focus { outline: none; border-color: var(--ev-primary); box-shadow: 0 0 0 2px rgba(107,150,191,0.35); } .ev-btn { display: inline-block; background-color: var(--ev-primary); color: var(--ev-white); border: none; padding: 7px 16px; font-size: 13px; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 4px; transition: background-color .15s ease, transform .05s ease; } .ev-btn:hover { background-color: var(--ev-primary-dark); } :root[data-theme="oscuro"] .ev-btn:hover { background-color: var(--ev-blue-med); } .ev-btn:active { transform: translateY(1px); } .ev-btn-rojo { background-color: var(--ev-danger); color: var(--ev-white); } .ev-btn-rojo:hover { background-color: var(--ev-danger-dark); } .ev-btn-gris { background-color: var(--ev-gris-bg); color: var(--ev-gris-text); } .ev-btn-gris:hover { background-color: var(--ev-gris-hover); } .ev-tabla { width: 100%; border-collapse: collapse; font-size: 13px; background-color: var(--ev-bg-2); color: var(--ev-text); } .ev-tabla th { background-color: var(--ev-primary); color: var(--ev-white); padding: 8px 8px; text-align: left; border-bottom: 2px solid var(--ev-accent); font-weight: 600; letter-spacing: .2px; } .ev-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--ev-border); } .ev-tabla tr:hover td { background-color: var(--ev-panel-2); } .ev-inactivo td { color: var(--ev-text-muted); font-style: italic; } .ev-form label { display: inline-block; width: 160px; font-size: 13px; vertical-align: top; color: var(--ev-text); } .ev-form .fila { margin-bottom: 8px; } .ev-form input[type=text], .ev-form input[type=date], .ev-form input[type=time], .ev-form select { font-size: 13px; padding: 6px 8px; width: 260px; background: var(--ev-bg-2); border: 1px solid var(--ev-border); color: var(--ev-text); border-radius: 4px; } .ev-form textarea { font-size: 13px; padding: 6px 8px; width: 420px; max-width: 100%; background: var(--ev-bg-2); border: 1px solid var(--ev-border); color: var(--ev-text); border-radius: 4px; font-family: "Segoe UI", Arial, Helvetica, sans-serif; resize: vertical; } .ev-form input[type=file] { font-size: 13px; color: var(--ev-text); } .ev-form .ev-avatar-ayuda { display: block; margin-top: 4px; font-size: 12px; color: var(--ev-text-muted); } .ev-msg-ok { background-color: var(--ev-ok-bg); color: var(--ev-ok-text); padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--ev-ok-border); border-left: 3px solid var(--ev-ok-text); font-size: 13px; border-radius: 3px; } .ev-msg-error { background-color: var(--ev-err-bg); color: var(--ev-err-text); padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--ev-err-border); border-left: 3px solid var(--ev-err-text); font-size: 13px; border-radius: 3px; } /* --- Control de modo oscuro / claro ----------------------------------- */ .ev-tema-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: inline-flex; align-items: center; gap: 6px; background: var(--ev-toggle-bg); color: var(--ev-toggle-text); border: none; border-radius: 20px; padding: 8px 16px; font-size: 13px; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.3); transition: background-color .15s ease, transform .05s ease; } .ev-tema-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .ev-tema-toggle:active { transform: translateY(0); } #ev-header .ev-tema-toggle-mini { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: #fff; border-radius: 16px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; } #ev-header .ev-tema-toggle-mini:hover { background: rgba(255,255,255,0.15); } /* --- Adaptativo: mantenimientos, reportes y formularios ---------------- */ .ev-tabla-scroll { width: 100%; overflow-x: auto; } @media (max-width: 720px) { .ev-contenedor { width: 100%; margin: 0; padding: 12px; border-radius: 0; box-sizing: border-box; } .ev-toolbar { flex-direction: column; align-items: stretch; } .ev-toolbar input[type=text], .ev-toolbar select { width: 100%; box-sizing: border-box; } /* Formularios: la etiqueta pasa arriba del campo en vez de al costado */ .ev-form label { display: block; width: auto; margin-bottom: 4px; } .ev-form .fila { margin-bottom: 12px; } .ev-form input[type=text], .ev-form input[type=date], .ev-form input[type=time], .ev-form select { width: 100%; max-width: 100%; box-sizing: border-box; } .ev-btn, .ev-btn-rojo, .ev-btn-gris { padding: 9px 16px; /* objetivo tactil mas comodo */ } .titulo { font-size: 15px; } }