- -
diff --git a/Comandos de guerra/Comandos.css b/Comandos de guerra/Comandos.css index a903808c8d..20c7f3fc5c 100644 --- a/Comandos de guerra/Comandos.css +++ b/Comandos de guerra/Comandos.css @@ -1,1008 +1,1008 @@ -/* === 1. ESTILOS DE LOS BOTONES Y PESTAÑAS === */ - -input.sheet-tab-input { - width: 150px; - height: 40px; - opacity: 0; - position: relative; - margin-right: -150px; - cursor: pointer; - z-index: 100; -} - -span.sheet-tab-visual { - display: inline-block; - width: 150px; - height: 40px; - line-height: 40px; - background-color: #ddd; - text-align: center; - font-weight: bold; - border-radius: 5px 5px 0 0; - border: 1px solid #999; -} - -span.sheet-spacer { - display: inline-block; - width: 10px; -} - -/* Efecto de botón pulsado */ -input.sheet-tab1:checked + span.sheet-tab-visual { - background-color: #333; - color: white; - border-bottom: 2px solid #333; -} -input.sheet-tab2:checked + span.sheet-tab-visual { - background-color: #333; - color: white; - border-bottom: 2px solid #333; -} - -/* Lógica de ocultación */ -div.sheet-page-container { - display: none; -} -input.sheet-tab1:checked ~ div.sheet-page-1 { - display: block !important; -} -input.sheet-tab2:checked ~ div.sheet-page-2 { - display: block !important; -} - - -/* === 2. ESTILOS GENERALES === */ - -h3 { - border-bottom: 2px solid #333; - color: #333; - margin-top: 15px; - margin-bottom: 10px; - text-transform: uppercase; - font-size: 1.1em; -} - -label { font-weight: bold; } - -/* === 3. DATOS PERSONALES (HORIZONTAL) === */ -.sheet-personal-data-row { - display: flex; - flex-wrap: wrap; - gap: 15px; - align-items: center; - margin-bottom: 15px; - background: #f4f4f4; - padding: 10px; - border-radius: 5px; -} - -.sheet-data-box { - display: flex; - flex-direction: column; -} -.sheet-data-box label { - font-size: 0.8em; - margin-bottom: 2px; -} -.sheet-data-box input { - border: 1px solid #999; -} - - -/* === 4. LAYOUT DE 4 COLUMNAS === */ -.sheet-four-column-layout { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 10px; - align-items: start; -} - -.sheet-column { - font-size: 0.85em; -} -.sheet-column input[type="number"] { - width: 35px; - padding: 2px; - text-align: center; -} -.sheet-column h3 { - font-size: 1em; - background: #333; - color: white; - padding: 3px; - text-align: center; -} - -/* --- TABLAS DE HABILIDADES ESTÁNDAR (5 COLUMNAS) --- */ -/* Se usa para TODO (Generales, Influencia, Especiales e Idiomas) */ -.sheet-skill-row { - display: grid; - /* Grid: Nombre | Attr | Base | Nivel | Total */ - grid-template-columns: 1fr 25px 35px 35px 35px; - gap: 2px; - padding: 2px 0; - border-bottom: 1px solid #eee; - align-items: center; -} - -.sheet-skill-header { - background-color: #ddd; - color: black; - font-weight: bold; - font-size: 0.8em; -} - -.sheet-root-skill { - background-color: #e8e8e8; - border-top: 1px solid #999; - font-weight: bold; - margin-top: 5px; -} - -input.sheet-total-box { - background-color: #e6e6e6; - border: 1px solid #999; - font-weight: bold; -} - -span.sheet-attr-ref { - font-size: 0.7em; - color: #666; - text-align: center; -} - -/* Input de texto elegante para idiomas/especialidades */ -input.sheet-text-line { - width: 95%; - border: none; - border-bottom: 1px dotted #333; - background: transparent; - text-align: left; - font-style: italic; -} -input.sheet-text-line:focus { - outline: none; - border-bottom: 1px solid #000; -} - -/* Subrayado para habilidades restringidas */ -.sheet-skill-restricted span:nth-child(2) { - text-decoration: underline; - text-underline-offset: 3px; - font-weight: 500; -} - -/* Contenedor del grupo con corchete */ -.sheet-skill-bracket { - position: relative; - margin-left: 5px; /* Espacio para el corchete */ - border-left: 2px solid #333; /* La línea vertical del corchete */ - padding-left: 5px; - margin-top: 2px; - margin-bottom: 2px; -} - -/* Las "puntas" del corchete (arriba y abajo) */ -.sheet-skill-bracket::before, -.sheet-skill-bracket::after { - content: ""; - position: absolute; - left: -2px; - width: 6px; - height: 2px; - background-color: #333; -} - -.sheet-skill-bracket::before { top: 0; } -.sheet-skill-bracket::after { bottom: 0; } - -/* Ajuste para que las filas dentro del corchete no se vean raras */ -.sheet-skill-bracket .sheet-skill-row { - border-bottom: 1px solid #eee; -} - -/* --- CARACTERÍSTICAS (Columna 1) --- */ -.sheet-atributos-compact .sheet-atributo-grupo { - border: 1px solid #ccc; - margin-bottom: 5px; - padding: 5px; - background: #fff; -} - -.sheet-header-with-input { - display: flex; - justify-content: space-between; - align-items: center; - background: #555; - color: white; - padding: 2px 5px; - border-radius: 3px; - margin-bottom: 5px; -} -.sheet-header-with-input h4 { - margin: 0; - font-size: 1em; -} - -.sheet-sub-row { - display: flex; - justify-content: space-between; - margin-bottom: 2px; -} - -/* --- ESTADO (PESTAÑA 2) --- */ - -.sheet-status-box { - border: 2px solid #333; - padding: 10px; - border-radius: 5px; - background: #fff; - width: 220px; - text-align: center; -} -.sheet-status-box h4 { - margin-top: 0; - background: #ddd; - padding: 5px; -} -.sheet-row { margin-bottom: 5px; } - -/*AVISOS DE ESTADO*/ - - - - - - -/* Estilo para los mensajes en P2 (Estado) */ -.sheet-loc-effect-text { - display: none; - font-size: 0.85em; - color: #c0392b; - font-weight: bold; - text-align: center; - margin-top: 4px; - line-height: 1em; -} - - -/* Contenedor general */ -.sheet-estado-p1-container { - width: 100%; - margin: 5px 0; -} - -/* Filas flexibles */ -.sheet-flex-row-status, -.sheet-flex-row-wounds { - display: flex; - flex-wrap: wrap; /* Permite que los elementos salten de línea si no caben */ - gap: 5px; - margin-bottom: 5px; - align-items: center; -} - -/* Banners principales compactos */ -.sheet-alert-banner { - display: none; /* Oculto por defecto */ - flex: 1 1 auto; /* Se estiran para llenar huecos, pero respetan el wrap */ - text-align: center; - padding: 4px 10px; - font-weight: bold; - font-size: 0.9em; - border-radius: 4px; - border: 1px solid; - text-transform: uppercase; - white-space: nowrap; /* Evita que el texto interno se rompa */ -} - -/* Tags de heridas (segunda fila) */ -.sheet-loc-tag { - display: none; - background: #fff; - border: 1px solid #ccc; - border-left: 3px solid #c0392b; - padding: 2px 8px; - font-size: 0.85em; - font-style: italic; - color: #444; - border-radius: 3px; - white-space: nowrap; -} - -/* Colores unificados */ -.sheet-alert-danger { background-color: #fdf2f2; border-color: #c0392b; color: #c0392b; } -.sheet-alert-warning { background-color: #fff9e6; border-color: #d68910; color: #7d5a00; } -.sheet-alert-bleeding { background-color: #fbecec; border-color: #9e1a1a; color: #9e1a1a; } - -/* LÓGICA DE VISIBILIDAD */ -.sheet-toggle[value="1"] ~ .sheet-msg-show, -input.sheet-health-toggle[value="inconsciente"] ~ .sheet-msg-inconsciente, -input.sheet-health-toggle[value="moribundo"] ~ .sheet-msg-moribundo, -input.sheet-sobrecarga-toggle[value="1"] ~ .sheet-msg-sobrecarga { - display: block !important; -} - -/* Ocultamos los mensajes específicos de sangrado leve por defecto */ -.sheet-msg-sangrado-1, .sheet-msg-sangrado-2 { - display: none; -} - -/* Si el valor es "1" (una sola herida), mostramos el normal */ -input.sheet-sangrado-l-toggle[value="1"] ~ .sheet-msg-sangrado-1 { - display: block !important; -} - -/* Si el valor es "2" (dos heridas), mostramos el de +2PH */ -input.sheet-sangrado-l-toggle[value="2"] ~ .sheet-msg-sangrado-2 { - display: block !important; -} - -/* Si el valor es "3plus" (tres o más), mostramos el de +3PH */ -input.sheet-sangrado-l-toggle[value="3plus"] ~ .sheet-msg-sangrado-3 { - display: block !important; -} - - -/* El selector se mantiene igual, pero ahora solo afectará al div que sea su hermano - DENTRO del contenedor .sheet-alert-item */ -.sheet-toggle[value="1"] ~ .sheet-msg-show { - display: block !important; -} - - -/* === 5. SECCIÓN DE ARMAMENTO === */ - -.sheet-armamento-container { - margin-top: 10px; - width: 100%; -} - -/* Cuadrícula para alinear perfectamente cabeceras y cajas de texto */ -.sheet-armamento-header, .sheet-armamento-row { - display: grid; - /* Proporciones de ancho para cada columna (Nombre es la más grande) */ - grid-template-columns: 25px 3fr 1fr 1.5fr 1fr 1fr 1fr 2.5fr 1fr 1fr; - gap: 5px; - align-items: center; - text-align: center; -} - -.sheet-armamento-header { - font-weight: bold; - border-bottom: 2px solid #333; - padding-bottom: 5px; - margin-bottom: 5px; - font-size: 0.9em; -} - -.sheet-armamento-row { - margin-bottom: 4px; -} - -/* Forzar que los inputs ocupen todo su espacio en la celda */ -.sheet-armamento-row input[type="text"], -.sheet-armamento-row input[type="number"] { - width: 100%; - box-sizing: border-box; - border: none; - border-bottom: 1px dotted #333; /* Estilo clásico de hoja de papel */ - background: transparent; - padding: 2px; - border-radius: 0; -} - -/* Excepción: el nombre va alineado a la izquierda */ -.sheet-armamento-row input.sheet-arma-nombre { - text-align: left; -} - -/* Efecto al seleccionar la casilla */ -.sheet-armamento-row input:focus { - outline: none; - border-bottom: 1px solid #000; - background-color: #f9f9f9; -} - -/* --- BLOQUE DE ALCANCE (_ / _ / _ / _) --- */ -.sheet-alcance-inputs { - display: flex; - justify-content: space-between; - align-items: center; -} - -.sheet-alcance-inputs input[type="text"] { - width: 20px !important; /* Casillas muy pequeñitas */ - padding: 0; - text-align: center; - border: none; - border-bottom: 1px solid #333; /* Línea de base igual a tu imagen */ -} - -.sheet-alcance-inputs span { - font-weight: bold; - color: #333; -} -/* === 6. LAYOUT DE LA PESTAÑA 2 (ARMAS Y ESTADO) === */ - -.sheet-page2-grid { - display: flex; - gap: 30px; - margin-top: 15px; - align-items: flex-start; /* Alinea los elementos arriba */ -} - -/* El bloque de armas ocupa la mayor parte del espacio */ -.sheet-armamento-col { - flex: 3; -} - -/* El bloque de estado ocupa menos espacio y se apila en vertical */ -.sheet-estado-col { - flex: 1; - display: flex; - flex-direction: column; - gap: 20px; - align-items: center; -} - -/* Asegura que las cajas de estado mantengan su tamaño adecuado */ -.sheet-estado-col .sheet-status-box { - width: 100%; - max-width: 200px; -} - -/* === 7. SECCIÓN DE CAPACIDADES === */ - -.sheet-capacidades-box { - text-align: left; - padding: 10px; - width: 220px !important; /* Un poco más ancho para que quepa el texto */ - margin-top: 20px; - -} - -.sheet-cap-row { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 0.85em; - margin-bottom: 4px; - -} - -/* Indentación para las sub-categorías (ej: Duración) */ -.sheet-cap-sub { - padding-left: 15px; - font-size: 0.8em; - color: #444; -} - -.sheet-cap-row label { - font-weight: normal; - margin: 0; -} - -/* Estilo de los números simulando relleno a boli */ -.sheet-cap-row input[type="number"] { - width: 30px; - border: none; - border-bottom: 1px solid #333; - background: transparent; - border-radius: 0; - padding: 0; - text-align: right; - font-weight: bold; -} - -.sheet-cap-row span { - display: flex; - align-items: center; - gap: 2px; -} - -.sheet-multi-input input[type="number"] { - width: 25px; -} - -/* === 8. SECCIÓN CONTACTOS Y EQUIPO === */ - -.sheet-contactos-equipo-row { - display: flex; - gap: 30px; - margin-top: 20px; - align-items: flex-start; -} - -.sheet-equipo-container { - flex: 1.2; /* Un pelín más grande porque tiene más columnas */ -} - -/* Sistema de cuadrícula para alinear los encabezados y los inputs */ - -.sheet-equipo-header, .sheet-equipo-row { - display: grid; - grid-template-columns: 25px 3fr 1fr 1fr 1fr; /* Nombre grande, el resto pequeños */ - gap: 5px; - align-items: center; - text-align: center; -} - -/* Estilo básico para los checkboxes en las filas */ -.sheet-armamento-row input[type="checkbox"], -.sheet-equipo-row input[type="checkbox"] { - width: 15px; - height: 15px; - cursor: pointer; -} - - - - -.sheet-equipo-row input { - width: 100%; - box-sizing: border-box; - border: none; - border-bottom: 1px solid #333; /* Línea simulando papel */ - background: transparent; - padding: 2px; - border-radius: 0; - text-align: center; -} - -/* El nombre siempre debe ir alineado a la izquierda */ -.sheet-equipo-row input.sheet-text-left { - text-align: left; -} - -.sheet-equipo-row input:focus { - outline: none; - border-bottom: 1px solid #000; - background-color: #f9f9f9; -} - -/* === 9. SECCIÓN RASGOS (VIRTUDES, DEFECTOS Y CAPACIDADES ESPECIALES) === */ - -.sheet-rasgos-row { - display: flex; - gap: 15px; /* Espacio entre las tres columnas */ - margin-bottom: 20px; - align-items: flex-start; -} - -.sheet-rasgo-container { - flex: 1; /* Hace que las tres cajas midan exactamente lo mismo */ -} - -.sheet-rasgo-row { - margin-bottom: 4px; -} - -/* Estilo de los inputs simulando líneas para escribir */ -.sheet-rasgo-row input[type="text"] { - width: 100%; - box-sizing: border-box; - border: none; - border-bottom: 1px solid #333; - background: transparent; - padding: 4px 2px; - border-radius: 0; - font-size: 0.95em; -} - -.sheet-rasgo-row input[type="text"]:focus { - outline: none; - border-bottom: 1px solid #000; - background-color: #f9f9f9; -} - -/* === 10. SECCIÓN DE LOCALIZACIONES === */ - -.sheet-localizaciones-box { - padding: 5px; - width: 220px !important; /* Mismo ancho que las capacidades para que cuadre perfecto */ - border: 1px solid #333; /* El borde doble que pide la imagen */ - -} - -/* Zonas de impacto (0 Cabeza, 1 2 3 Pecho...) */ -.sheet-loc-zone { - text-align: center; - margin-top: 6px; - margin-bottom: 2px; - font-size: 1em; - font-family: 'Georgia', serif; /* Fuente cursiva elegante como la de la imagen */ - border-top: 1px dotted #ccc; /* Ligera separación visual opcional */ - padding-top: 4px; -} - -.sheet-loc-zone:first-child { - border-top: none; - margin-top: 0; - padding-top: 0; -} - -/* Contenedor de la fila de localización */ -.sheet-loc-row { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 3px; - font-size: 0.85em; -} - -/* Estilo para que el label y el umbral parezcan una sola frase */ -.sheet-loc-label-phrase { - display: inline-flex; - align-items: center; - gap: 2px; - font-weight: bold; - margin: 0; - white-space: nowrap;} - -/* Input que parece texto plano (para los umbrales readonly) */ -input.sheet-inline-val[type="number"] { - background: transparent !important; - border: none !important; - box-shadow: none !important; - color: #333 !important; - width: 18px !important; - padding: 0 !important; - margin: 0 !important; - text-align: center; - font-weight: bold; - font-size: inherit; - pointer-events: none; /* El jugador no puede clicarlo */ - appearance: textfield; - -moz-appearance: textfield; -} - -/* Quitar flechas en Chrome/Safari */ -input.sheet-inline-val::-webkit-inner-spin-button, -input.sheet-inline-val::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; -} - -/* Casilla de entrada manual (la que está al final de la fila) */ -.sheet-loc-row input[type="number"]:not(.sheet-inline-val) { - width: 40px; - height: 20px; - border: 1px solid #999; - text-align: center; -} - -/* === 11. SECCIÓN DE DINERO Y PESO (CORREGIDO) === */ - -/* Contenedor principal: fuerza a Peso y Dinero a estar uno al lado del otro */ -.sheet-horizontal-container { - display: flex !important; - flex-direction: row !important; - gap: 15px; - width: 100%; - margin: 15px 0; - align-items: stretch; -} - -/* Caja de Peso: le quitamos el ancho fijo de status-box */ -.sheet-peso-total-box { - flex: 0 0 140px !important; /* Ancho fijo para que no baile */ - width: 140px !important; - padding: 10px; - border: 2px solid #333; - text-align: center; - background: #fff; -} - -/* Caja de Dinero: le decimos que ocupe todo el espacio restante */ -.sheet-dinero-box-horizontal { - flex: 1 !important; - width: auto !important; /* Anula los 220px del status-box */ - padding: 10px; - border: 2px solid #333; - background: #fff; - margin: 0 !important; -} - -/* El título DINERO debe ir a la izquierda o centro */ -.sheet-dinero-box-horizontal h4 { - margin-top: 0; - margin-bottom: 10px; - background: #ddd; - padding: 5px; -} - -/* Contenedor interno de los 3 items de dinero */ -.sheet-dinero-horizontal-container { - display: flex; - flex-direction: row; /* Fuerza horizontal */ - justify-content: space-around; - align-items: center; - gap: 10px; -} - -/* Estilo de cada par Label + Input */ -.sheet-dinero-item { - display: flex; - flex-direction: row; /* Label e Input en la misma línea */ - align-items: center; - gap: 5px; - font-family: 'Georgia', serif; - font-size: 0.9em; -} - -.sheet-dinero-item label { - margin-bottom: 0; /* Quita el margen que empuja el input abajo */ - white-space: nowrap; -} - -.sheet-dinero-item input[type="number"] { - width: 50px !important; /* Ajusta según necesites */ - border: none; - border-bottom: 1px solid #333; - background: transparent; - text-align: center; - font-weight: bold; -} - -/* Estilo del peso */ -.sheet-peso-display { - display: flex; - align-items: center; - justify-content: center; - gap: 5px; -} - -.sheet-peso-display input { - width: 60px !important; - font-size: 1.2em; - border: none; - border-bottom: 1px solid #333; - background: transparent; - font-weight: bold; -} - -/* === 12. SECCIÓN DE NOTAS === */ - -.sheet-notas-container { - margin-top: 20px; - border: 2px solid #333; - padding: 8px; - width: 100%; - box-sizing: border-box; - background-color: #fff; /* Fondo blanco limpio para escribir */ -} - -.sheet-notas-title { - font-family: 'Georgia', serif; - font-size: 1.3em; - letter-spacing: 2px; - margin: 0 0 5px 0; - text-align: left; - background: transparent; - border: none; - padding: 0; -} - -/* Área de texto expandible */ -.sheet-notas-textarea { - width: 100%; - min-height: 150px; /* Altura por defecto */ - border: none; - resize: vertical; /* Permite al jugador estirar la caja hacia abajo si escribe mucho */ - background: transparent; - font-family: Arial, sans-serif; - font-size: 0.95em; - padding: 5px; - box-sizing: border-box; -} - -.sheet-notas-textarea:focus { - outline: none; - background-color: #f9f9f9; -} - -/* === 13. TIRADA SOMBRA (CORREGIDO) === */ - -/* Diseño del mensaje en el Chat */ -.sheet-rolltemplate-tirada_sombra .sheet-rt-card { - background-color: #ffffff; - border: 2px solid #2c3e50; - border-radius: 5px; - overflow: hidden; - min-width: 220px; /* Tamaño fijo para que no baile */ -} - - -.sheet-rolltemplate-tirada_sombra .sheet-rt-header { - background-color: #2c3e50; - color: #ffffff; - padding: 8px; - text-align: center; - font-weight: bold; - letter-spacing: 2px; -} - - -.sheet-rolltemplate-tirada_sombra .sheet-rt-row { - font-family: Arial, sans-serif; - display: flex; - justify-content: space-between; - padding: 4px 10px; - border-bottom: 1px solid #eee; -} - -.sheet-rolltemplate-tirada_sombra .sheet-shadow-row { - background-color: #f4f4f4; -} - -.sheet-rolltemplate-tirada_sombra .sheet-value { - font-weight: bold; - color: #000; -} - -.sheet-rolltemplate-tirada_sombra .sheet-main-value { - font-size: 1.3em; - color: #2c3e50; -} - -.sheet-btn-tirada_sombra { - background: #333; - color: white; - border: 1px solid #000; - padding: 5px 10px; - border-radius: 4px; - font-weight: bold; - cursor: pointer; - font-size: 0.9em; -} - -.sheet-btn-tirada_sombra:hover { - background: #555; - color: #fff; -} - -/* Estilos para el cuadro de resultado final */ - -.sheet-rolltemplate-tirada_sombra .sheet-rt-result-box { - padding: 8px; - text-align: center; - font-family: 'Georgia', serif; - font-weight: bold; - font-size: 1.3em; - border-top: 1px solid #2c3e50; -} - -.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-exito { - color: #27ae60; /* Verde */ - text-shadow: 1px 1px 1px #000; -} - -.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-fallo { - color: #c0392b; /* Rojo */ - text-shadow: 1px 1px 1px #000; -} - -/* Ajuste opcional para ver los 3 dados en una línea */ -.sheet-rolltemplate-tirada_sombra .sheet-value { - font-size: 1em; -} - -/* Quitar el formato de "cajita de dado" para que parezca texto normal */ -.sheet-rolltemplate-tirada_sombra .inlinerollresult { - background-color: transparent !important; - border: none !important; - padding: 0 !important; - font-weight: bold; - color: #000; -} - -/* Estilos de la tarjeta y filas */ - - -.sheet-rolltemplate-tirada_sombra .sheet-shadow-row { - background-color: #f1f3f4; -} - -.sheet-rolltemplate-tirada_sombra .sheet-main-value { - font-size: 1.2em; - color: #2c3e50; -} - - - -.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-exito { - color: #27ae60; -} - -.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-fallo { - color: #c0392b; -} - -/* Colores para resultados especiales en el Chat */ -.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-critico { - color: #d4af37; /* Dorado */ - text-shadow: 2px 2px 2px #000; - font-size: 1.2em; - animation: flash 1s infinite alternate; /* Opcional: un pequeño parpadeo */ -} - -.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-pifia { - color: #000000; - background: #c0392b; - padding: 2px; - border-radius: 3px; - text-transform: uppercase; -} - -.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-especial-exito { - color: #2ecc71; /* Verde esmeralda */ - border-bottom: 2px dashed #2ecc71; -} - -.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-especial-fallo { - color: #e67e22; /* Naranja */ - font-style: italic; -} - -/* Animación opcional para el crítico */ -@keyframes flash { - from { opacity: 1; } - to { opacity: 0.7; } -} - -/* Botón de tirada pequeño para habilidades */ -button[type="action"].sheet-skill-roll-btn { - font-family: "dicefontd10"; /* Fuente interna de Roll20 para iconos de dados */ - background: transparent; - border: none; - padding: 0; - margin: 0; - font-size: 1.2em; - color: #333; - cursor: pointer; - box-shadow: none; - text-shadow: none; - width: 20px; - height: 20px; - line-height: 20px; -} - -button[type="action"].sheet-skill-roll-btn:hover { - color: #c0392b; /* Cambia a rojo al pasar el ratón */ -} - -/* Ajuste de la cuadrícula de habilidades para que quepa el botón al principio */ -.sheet-skill-row { - /* Añadimos una columna de 20px al principio para el botón */ - grid-template-columns: 20px 1fr 25px 35px 35px 35px; -} - -.sheet-skill-header { - /* El encabezado también debe tener 6 columnas */ - grid-template-columns: 20px 1fr 25px 35px 35px 35px; -} - - -.sheet-rolltemplate-tirada_sombra .sheet-main-value { - font-size: 1.3em; - font-weight: bold; -} - -/* Ajuste para que el texto de daño multilínea se vea bien */ -.sheet-rolltemplate-tirada_sombra div[style*="background: #fdfaf4"] { - text-align: left; - color: #333; - border-radius: 0 0 5px 5px; -} - -.sheet-rolltemplate-tirada_sombra br + b { - color: #630d0d; -} - -/* Estilo para la caja de texto de daño multilínea */ -.sheet-rolltemplate-tirada_sombra div[style*="white-space: pre-wrap"] { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - font-family: 'Courier New', monospace; /* Opcional: estilo más "informe de combate" */ +/* === 1. ESTILOS DE LOS BOTONES Y PESTAÑAS === */ + +input.sheet-tab-input { + width: 150px; + height: 40px; + opacity: 0; + position: relative; + margin-right: -150px; + cursor: pointer; + z-index: 100; +} + +span.sheet-tab-visual { + display: inline-block; + width: 150px; + height: 40px; + line-height: 40px; + background-color: #ddd; + text-align: center; + font-weight: bold; + border-radius: 5px 5px 0 0; + border: 1px solid #999; +} + +span.sheet-spacer { + display: inline-block; + width: 10px; +} + +/* Efecto de botón pulsado */ +input.sheet-tab1:checked + span.sheet-tab-visual { + background-color: #333; + color: white; + border-bottom: 2px solid #333; +} +input.sheet-tab2:checked + span.sheet-tab-visual { + background-color: #333; + color: white; + border-bottom: 2px solid #333; +} + +/* Lógica de ocultación */ +div.sheet-page-container { + display: none; +} +input.sheet-tab1:checked ~ div.sheet-page-1 { + display: block !important; +} +input.sheet-tab2:checked ~ div.sheet-page-2 { + display: block !important; +} + + +/* === 2. ESTILOS GENERALES === */ + +h3 { + border-bottom: 2px solid #333; + color: #333; + margin-top: 15px; + margin-bottom: 10px; + text-transform: uppercase; + font-size: 1.1em; +} + +label { font-weight: bold; } + +/* === 3. DATOS PERSONALES (HORIZONTAL) === */ +.sheet-personal-data-row { + display: flex; + flex-wrap: wrap; + gap: 15px; + align-items: center; + margin-bottom: 15px; + background: #f4f4f4; + padding: 10px; + border-radius: 5px; +} + +.sheet-data-box { + display: flex; + flex-direction: column; +} +.sheet-data-box label { + font-size: 0.8em; + margin-bottom: 2px; +} +.sheet-data-box input { + border: 1px solid #999; +} + + +/* === 4. LAYOUT DE 4 COLUMNAS === */ +.sheet-four-column-layout { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + align-items: start; +} + +.sheet-column { + font-size: 0.85em; +} +.sheet-column input[type="number"] { + width: 35px; + padding: 2px; + text-align: center; +} +.sheet-column h3 { + font-size: 1em; + background: #333; + color: white; + padding: 3px; + text-align: center; +} + +/* --- TABLAS DE HABILIDADES ESTÁNDAR (5 COLUMNAS) --- */ +/* Se usa para TODO (Generales, Influencia, Especiales e Idiomas) */ +.sheet-skill-row { + display: grid; + /* Grid: Nombre | Attr | Base | Nivel | Total */ + grid-template-columns: 1fr 25px 35px 35px 35px; + gap: 2px; + padding: 2px 0; + border-bottom: 1px solid #eee; + align-items: center; +} + +.sheet-skill-header { + background-color: #ddd; + color: black; + font-weight: bold; + font-size: 0.8em; +} + +.sheet-root-skill { + background-color: #e8e8e8; + border-top: 1px solid #999; + font-weight: bold; + margin-top: 5px; +} + +input.sheet-total-box { + background-color: #e6e6e6; + border: 1px solid #999; + font-weight: bold; +} + +span.sheet-attr-ref { + font-size: 0.7em; + color: #666; + text-align: center; +} + +/* Input de texto elegante para idiomas/especialidades */ +input.sheet-text-line { + width: 95%; + border: none; + border-bottom: 1px dotted #333; + background: transparent; + text-align: left; + font-style: italic; +} +input.sheet-text-line:focus { + outline: none; + border-bottom: 1px solid #000; +} + +/* Subrayado para habilidades restringidas */ +.sheet-skill-restricted span:nth-child(2) { + text-decoration: underline; + text-underline-offset: 3px; + font-weight: 500; +} + +/* Contenedor del grupo con corchete */ +.sheet-skill-bracket { + position: relative; + margin-left: 5px; /* Espacio para el corchete */ + border-left: 2px solid #333; /* La línea vertical del corchete */ + padding-left: 5px; + margin-top: 2px; + margin-bottom: 2px; +} + +/* Las "puntas" del corchete (arriba y abajo) */ +.sheet-skill-bracket::before, +.sheet-skill-bracket::after { + content: ""; + position: absolute; + left: -2px; + width: 6px; + height: 2px; + background-color: #333; +} + +.sheet-skill-bracket::before { top: 0; } +.sheet-skill-bracket::after { bottom: 0; } + +/* Ajuste para que las filas dentro del corchete no se vean raras */ +.sheet-skill-bracket .sheet-skill-row { + border-bottom: 1px solid #eee; +} + +/* --- CARACTERÍSTICAS (Columna 1) --- */ +.sheet-atributos-compact .sheet-atributo-grupo { + border: 1px solid #ccc; + margin-bottom: 5px; + padding: 5px; + background: #fff; +} + +.sheet-header-with-input { + display: flex; + justify-content: space-between; + align-items: center; + background: #555; + color: white; + padding: 2px 5px; + border-radius: 3px; + margin-bottom: 5px; +} +.sheet-header-with-input h4 { + margin: 0; + font-size: 1em; +} + +.sheet-sub-row { + display: flex; + justify-content: space-between; + margin-bottom: 2px; +} + +/* --- ESTADO (PESTAÑA 2) --- */ + +.sheet-status-box { + border: 2px solid #333; + padding: 10px; + border-radius: 5px; + background: #fff; + width: 220px; + text-align: center; +} +.sheet-status-box h4 { + margin-top: 0; + background: #ddd; + padding: 5px; +} +.sheet-row { margin-bottom: 5px; } + +/*AVISOS DE ESTADO*/ + + + + + + +/* Estilo para los mensajes en P2 (Estado) */ +.sheet-loc-effect-text { + display: none; + font-size: 0.85em; + color: #c0392b; + font-weight: bold; + text-align: center; + margin-top: 4px; + line-height: 1em; +} + + +/* Contenedor general */ +.sheet-estado-p1-container { + width: 100%; + margin: 5px 0; +} + +/* Filas flexibles */ +.sheet-flex-row-status, +.sheet-flex-row-wounds { + display: flex; + flex-wrap: wrap; /* Permite que los elementos salten de línea si no caben */ + gap: 5px; + margin-bottom: 5px; + align-items: center; +} + +/* Banners principales compactos */ +.sheet-alert-banner { + display: none; /* Oculto por defecto */ + flex: 1 1 auto; /* Se estiran para llenar huecos, pero respetan el wrap */ + text-align: center; + padding: 4px 10px; + font-weight: bold; + font-size: 0.9em; + border-radius: 4px; + border: 1px solid; + text-transform: uppercase; + white-space: nowrap; /* Evita que el texto interno se rompa */ +} + +/* Tags de heridas (segunda fila) */ +.sheet-loc-tag { + display: none; + background: #fff; + border: 1px solid #ccc; + border-left: 3px solid #c0392b; + padding: 2px 8px; + font-size: 0.85em; + font-style: italic; + color: #444; + border-radius: 3px; + white-space: nowrap; +} + +/* Colores unificados */ +.sheet-alert-danger { background-color: #fdf2f2; border-color: #c0392b; color: #c0392b; } +.sheet-alert-warning { background-color: #fff9e6; border-color: #d68910; color: #7d5a00; } +.sheet-alert-bleeding { background-color: #fbecec; border-color: #9e1a1a; color: #9e1a1a; } + +/* LÓGICA DE VISIBILIDAD */ +.sheet-toggle[value="1"] ~ .sheet-msg-show, +input.sheet-health-toggle[value="inconsciente"] ~ .sheet-msg-inconsciente, +input.sheet-health-toggle[value="moribundo"] ~ .sheet-msg-moribundo, +input.sheet-sobrecarga-toggle[value="1"] ~ .sheet-msg-sobrecarga { + display: block !important; +} + +/* Ocultamos los mensajes específicos de sangrado leve por defecto */ +.sheet-msg-sangrado-1, .sheet-msg-sangrado-2 { + display: none; +} + +/* Si el valor es "1" (una sola herida), mostramos el normal */ +input.sheet-sangrado-l-toggle[value="1"] ~ .sheet-msg-sangrado-1 { + display: block !important; +} + +/* Si el valor es "2" (dos heridas), mostramos el de +2PH */ +input.sheet-sangrado-l-toggle[value="2"] ~ .sheet-msg-sangrado-2 { + display: block !important; +} + +/* Si el valor es "3plus" (tres o más), mostramos el de +3PH */ +input.sheet-sangrado-l-toggle[value="3plus"] ~ .sheet-msg-sangrado-3 { + display: block !important; +} + + +/* El selector se mantiene igual, pero ahora solo afectará al div que sea su hermano + DENTRO del contenedor .sheet-alert-item */ +.sheet-toggle[value="1"] ~ .sheet-msg-show { + display: block !important; +} + + +/* === 5. SECCIÓN DE ARMAMENTO === */ + +.sheet-armamento-container { + margin-top: 10px; + width: 100%; +} + +/* Cuadrícula para alinear perfectamente cabeceras y cajas de texto */ +.sheet-armamento-header, .sheet-armamento-row { + display: grid; + /* Proporciones de ancho para cada columna (Nombre es la más grande) */ + grid-template-columns: 25px 3fr 1fr 1.5fr 1fr 1fr 1fr 2.5fr 1fr 1fr; + gap: 5px; + align-items: center; + text-align: center; +} + +.sheet-armamento-header { + font-weight: bold; + border-bottom: 2px solid #333; + padding-bottom: 5px; + margin-bottom: 5px; + font-size: 0.9em; +} + +.sheet-armamento-row { + margin-bottom: 4px; +} + +/* Forzar que los inputs ocupen todo su espacio en la celda */ +.sheet-armamento-row input[type="text"], +.sheet-armamento-row input[type="number"] { + width: 100%; + box-sizing: border-box; + border: none; + border-bottom: 1px dotted #333; /* Estilo clásico de hoja de papel */ + background: transparent; + padding: 2px; + border-radius: 0; +} + +/* Excepción: el nombre va alineado a la izquierda */ +.sheet-armamento-row input.sheet-arma-nombre { + text-align: left; +} + +/* Efecto al seleccionar la casilla */ +.sheet-armamento-row input:focus { + outline: none; + border-bottom: 1px solid #000; + background-color: #f9f9f9; +} + +/* --- BLOQUE DE ALCANCE (_ / _ / _ / _) --- */ +.sheet-alcance-inputs { + display: flex; + justify-content: space-between; + align-items: center; +} + +.sheet-alcance-inputs input[type="text"] { + width: 20px !important; /* Casillas muy pequeñitas */ + padding: 0; + text-align: center; + border: none; + border-bottom: 1px solid #333; /* Línea de base igual a tu imagen */ +} + +.sheet-alcance-inputs span { + font-weight: bold; + color: #333; +} +/* === 6. LAYOUT DE LA PESTAÑA 2 (ARMAS Y ESTADO) === */ + +.sheet-page2-grid { + display: flex; + gap: 30px; + margin-top: 15px; + align-items: flex-start; /* Alinea los elementos arriba */ +} + +/* El bloque de armas ocupa la mayor parte del espacio */ +.sheet-armamento-col { + flex: 3; +} + +/* El bloque de estado ocupa menos espacio y se apila en vertical */ +.sheet-estado-col { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; +} + +/* Asegura que las cajas de estado mantengan su tamaño adecuado */ +.sheet-estado-col .sheet-status-box { + width: 100%; + max-width: 200px; +} + +/* === 7. SECCIÓN DE CAPACIDADES === */ + +.sheet-capacidades-box { + text-align: left; + padding: 10px; + width: 220px !important; /* Un poco más ancho para que quepa el texto */ + margin-top: 20px; + +} + +.sheet-cap-row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.85em; + margin-bottom: 4px; + +} + +/* Indentación para las sub-categorías (ej: Duración) */ +.sheet-cap-sub { + padding-left: 15px; + font-size: 0.8em; + color: #444; +} + +.sheet-cap-row label { + font-weight: normal; + margin: 0; +} + +/* Estilo de los números simulando relleno a boli */ +.sheet-cap-row input[type="number"] { + width: 30px; + border: none; + border-bottom: 1px solid #333; + background: transparent; + border-radius: 0; + padding: 0; + text-align: right; + font-weight: bold; +} + +.sheet-cap-row span { + display: flex; + align-items: center; + gap: 2px; +} + +.sheet-multi-input input[type="number"] { + width: 25px; +} + +/* === 8. SECCIÓN CONTACTOS Y EQUIPO === */ + +.sheet-contactos-equipo-row { + display: flex; + gap: 30px; + margin-top: 20px; + align-items: flex-start; +} + +.sheet-equipo-container { + flex: 1.2; /* Un pelín más grande porque tiene más columnas */ +} + +/* Sistema de cuadrícula para alinear los encabezados y los inputs */ + +.sheet-equipo-header, .sheet-equipo-row { + display: grid; + grid-template-columns: 25px 3fr 1fr 1fr 1fr; /* Nombre grande, el resto pequeños */ + gap: 5px; + align-items: center; + text-align: center; +} + +/* Estilo básico para los checkboxes en las filas */ +.sheet-armamento-row input[type="checkbox"], +.sheet-equipo-row input[type="checkbox"] { + width: 15px; + height: 15px; + cursor: pointer; +} + + + + +.sheet-equipo-row input { + width: 100%; + box-sizing: border-box; + border: none; + border-bottom: 1px solid #333; /* Línea simulando papel */ + background: transparent; + padding: 2px; + border-radius: 0; + text-align: center; +} + +/* El nombre siempre debe ir alineado a la izquierda */ +.sheet-equipo-row input.sheet-text-left { + text-align: left; +} + +.sheet-equipo-row input:focus { + outline: none; + border-bottom: 1px solid #000; + background-color: #f9f9f9; +} + +/* === 9. SECCIÓN RASGOS (VIRTUDES, DEFECTOS Y CAPACIDADES ESPECIALES) === */ + +.sheet-rasgos-row { + display: flex; + gap: 15px; /* Espacio entre las tres columnas */ + margin-bottom: 20px; + align-items: flex-start; +} + +.sheet-rasgo-container { + flex: 1; /* Hace que las tres cajas midan exactamente lo mismo */ +} + +.sheet-rasgo-row { + margin-bottom: 4px; +} + +/* Estilo de los inputs simulando líneas para escribir */ +.sheet-rasgo-row input[type="text"] { + width: 100%; + box-sizing: border-box; + border: none; + border-bottom: 1px solid #333; + background: transparent; + padding: 4px 2px; + border-radius: 0; + font-size: 0.95em; +} + +.sheet-rasgo-row input[type="text"]:focus { + outline: none; + border-bottom: 1px solid #000; + background-color: #f9f9f9; +} + +/* === 10. SECCIÓN DE LOCALIZACIONES === */ + +.sheet-localizaciones-box { + padding: 5px; + width: 220px !important; /* Mismo ancho que las capacidades para que cuadre perfecto */ + border: 1px solid #333; /* El borde doble que pide la imagen */ + +} + +/* Zonas de impacto (0 Cabeza, 1 2 3 Pecho...) */ +.sheet-loc-zone { + text-align: center; + margin-top: 6px; + margin-bottom: 2px; + font-size: 1em; + font-family: 'Georgia', serif; /* Fuente cursiva elegante como la de la imagen */ + border-top: 1px dotted #ccc; /* Ligera separación visual opcional */ + padding-top: 4px; +} + +.sheet-loc-zone:first-child { + border-top: none; + margin-top: 0; + padding-top: 0; +} + +/* Contenedor de la fila de localización */ +.sheet-loc-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 3px; + font-size: 0.85em; +} + +/* Estilo para que el label y el umbral parezcan una sola frase */ +.sheet-loc-label-phrase { + display: inline-flex; + align-items: center; + gap: 2px; + font-weight: bold; + margin: 0; + white-space: nowrap;} + +/* Input que parece texto plano (para los umbrales readonly) */ +input.sheet-inline-val[type="number"] { + background: transparent !important; + border: none !important; + box-shadow: none !important; + color: #333 !important; + width: 18px !important; + padding: 0 !important; + margin: 0 !important; + text-align: center; + font-weight: bold; + font-size: inherit; + pointer-events: none; /* El jugador no puede clicarlo */ + appearance: textfield; + -moz-appearance: textfield; +} + +/* Quitar flechas en Chrome/Safari */ +input.sheet-inline-val::-webkit-inner-spin-button, +input.sheet-inline-val::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Casilla de entrada manual (la que está al final de la fila) */ +.sheet-loc-row input[type="number"]:not(.sheet-inline-val) { + width: 40px; + height: 20px; + border: 1px solid #999; + text-align: center; +} + +/* === 11. SECCIÓN DE DINERO Y PESO (CORREGIDO) === */ + +/* Contenedor principal: fuerza a Peso y Dinero a estar uno al lado del otro */ +.sheet-horizontal-container { + display: flex !important; + flex-direction: row !important; + gap: 15px; + width: 100%; + margin: 15px 0; + align-items: stretch; +} + +/* Caja de Peso: le quitamos el ancho fijo de status-box */ +.sheet-peso-total-box { + flex: 0 0 140px !important; /* Ancho fijo para que no baile */ + width: 140px !important; + padding: 10px; + border: 2px solid #333; + text-align: center; + background: #fff; +} + +/* Caja de Dinero: le decimos que ocupe todo el espacio restante */ +.sheet-dinero-box-horizontal { + flex: 1 !important; + width: auto !important; /* Anula los 220px del status-box */ + padding: 10px; + border: 2px solid #333; + background: #fff; + margin: 0 !important; +} + +/* El título DINERO debe ir a la izquierda o centro */ +.sheet-dinero-box-horizontal h4 { + margin-top: 0; + margin-bottom: 10px; + background: #ddd; + padding: 5px; +} + +/* Contenedor interno de los 3 items de dinero */ +.sheet-dinero-horizontal-container { + display: flex; + flex-direction: row; /* Fuerza horizontal */ + justify-content: space-around; + align-items: center; + gap: 10px; +} + +/* Estilo de cada par Label + Input */ +.sheet-dinero-item { + display: flex; + flex-direction: row; /* Label e Input en la misma línea */ + align-items: center; + gap: 5px; + font-family: 'Georgia', serif; + font-size: 0.9em; +} + +.sheet-dinero-item label { + margin-bottom: 0; /* Quita el margen que empuja el input abajo */ + white-space: nowrap; +} + +.sheet-dinero-item input[type="number"] { + width: 50px !important; /* Ajusta según necesites */ + border: none; + border-bottom: 1px solid #333; + background: transparent; + text-align: center; + font-weight: bold; +} + +/* Estilo del peso */ +.sheet-peso-display { + display: flex; + align-items: center; + justify-content: center; + gap: 5px; +} + +.sheet-peso-display input { + width: 60px !important; + font-size: 1.2em; + border: none; + border-bottom: 1px solid #333; + background: transparent; + font-weight: bold; +} + +/* === 12. SECCIÓN DE NOTAS === */ + +.sheet-notas-container { + margin-top: 20px; + border: 2px solid #333; + padding: 8px; + width: 100%; + box-sizing: border-box; + background-color: #fff; /* Fondo blanco limpio para escribir */ +} + +.sheet-notas-title { + font-family: 'Georgia', serif; + font-size: 1.3em; + letter-spacing: 2px; + margin: 0 0 5px 0; + text-align: left; + background: transparent; + border: none; + padding: 0; +} + +/* Área de texto expandible */ +.sheet-notas-textarea { + width: 100%; + min-height: 150px; /* Altura por defecto */ + border: none; + resize: vertical; /* Permite al jugador estirar la caja hacia abajo si escribe mucho */ + background: transparent; + font-family: Arial, sans-serif; + font-size: 0.95em; + padding: 5px; + box-sizing: border-box; +} + +.sheet-notas-textarea:focus { + outline: none; + background-color: #f9f9f9; +} + +/* === 13. TIRADA SOMBRA (CORREGIDO) === */ + +/* Diseño del mensaje en el Chat */ +.sheet-rolltemplate-tirada_sombra .sheet-rt-card { + background-color: #ffffff; + border: 2px solid #2c3e50; + border-radius: 5px; + overflow: hidden; + min-width: 220px; /* Tamaño fijo para que no baile */ +} + + +.sheet-rolltemplate-tirada_sombra .sheet-rt-header { + background-color: #2c3e50; + color: #ffffff; + padding: 8px; + text-align: center; + font-weight: bold; + letter-spacing: 2px; +} + + +.sheet-rolltemplate-tirada_sombra .sheet-rt-row { + font-family: Arial, sans-serif; + display: flex; + justify-content: space-between; + padding: 4px 10px; + border-bottom: 1px solid #eee; +} + +.sheet-rolltemplate-tirada_sombra .sheet-shadow-row { + background-color: #f4f4f4; +} + +.sheet-rolltemplate-tirada_sombra .sheet-value { + font-weight: bold; + color: #000; +} + +.sheet-rolltemplate-tirada_sombra .sheet-main-value { + font-size: 1.3em; + color: #2c3e50; +} + +.sheet-btn-tirada_sombra { + background: #333; + color: white; + border: 1px solid #000; + padding: 5px 10px; + border-radius: 4px; + font-weight: bold; + cursor: pointer; + font-size: 0.9em; +} + +.sheet-btn-tirada_sombra:hover { + background: #555; + color: #fff; +} + +/* Estilos para el cuadro de resultado final */ + +.sheet-rolltemplate-tirada_sombra .sheet-rt-result-box { + padding: 8px; + text-align: center; + font-family: 'Georgia', serif; + font-weight: bold; + font-size: 1.3em; + border-top: 1px solid #2c3e50; +} + +.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-exito { + color: #27ae60; /* Verde */ + text-shadow: 1px 1px 1px #000; +} + +.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-fallo { + color: #c0392b; /* Rojo */ + text-shadow: 1px 1px 1px #000; +} + +/* Ajuste opcional para ver los 3 dados en una línea */ +.sheet-rolltemplate-tirada_sombra .sheet-value { + font-size: 1em; +} + +/* Quitar el formato de "cajita de dado" para que parezca texto normal */ +.sheet-rolltemplate-tirada_sombra .inlinerollresult { + background-color: transparent !important; + border: none !important; + padding: 0 !important; + font-weight: bold; + color: #000; +} + +/* Estilos de la tarjeta y filas */ + + +.sheet-rolltemplate-tirada_sombra .sheet-shadow-row { + background-color: #f1f3f4; +} + +.sheet-rolltemplate-tirada_sombra .sheet-main-value { + font-size: 1.2em; + color: #2c3e50; +} + + + +.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-exito { + color: #27ae60; +} + +.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-fallo { + color: #c0392b; +} + +/* Colores para resultados especiales en el Chat */ +.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-critico { + color: #d4af37; /* Dorado */ + text-shadow: 2px 2px 2px #000; + font-size: 1.2em; + animation: flash 1s infinite alternate; /* Opcional: un pequeño parpadeo */ +} + +.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-pifia { + color: #000000; + background: #c0392b; + padding: 2px; + border-radius: 3px; + text-transform: uppercase; +} + +.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-especial-exito { + color: #2ecc71; /* Verde esmeralda */ + border-bottom: 2px dashed #2ecc71; +} + +.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-especial-fallo { + color: #e67e22; /* Naranja */ + font-style: italic; +} + +/* Animación opcional para el crítico */ +@keyframes flash { + from { opacity: 1; } + to { opacity: 0.7; } +} + +/* Botón de tirada pequeño para habilidades */ +button[type="action"].sheet-skill-roll-btn { + font-family: "dicefontd10"; /* Fuente interna de Roll20 para iconos de dados */ + background: transparent; + border: none; + padding: 0; + margin: 0; + font-size: 1.2em; + color: #333; + cursor: pointer; + box-shadow: none; + text-shadow: none; + width: 20px; + height: 20px; + line-height: 20px; +} + +button[type="action"].sheet-skill-roll-btn:hover { + color: #c0392b; /* Cambia a rojo al pasar el ratón */ +} + +/* Ajuste de la cuadrícula de habilidades para que quepa el botón al principio */ +.sheet-skill-row { + /* Añadimos una columna de 20px al principio para el botón */ + grid-template-columns: 20px 1fr 25px 35px 35px 35px; +} + +.sheet-skill-header { + /* El encabezado también debe tener 6 columnas */ + grid-template-columns: 20px 1fr 25px 35px 35px 35px; +} + + +.sheet-rolltemplate-tirada_sombra .sheet-main-value { + font-size: 1.3em; + font-weight: bold; +} + +/* Ajuste para que el texto de daño multilínea se vea bien */ +.sheet-rolltemplate-tirada_sombra div[style*="background: #fdfaf4"] { + text-align: left; + color: #333; + border-radius: 0 0 5px 5px; +} + +.sheet-rolltemplate-tirada_sombra br + b { + color: #630d0d; +} + +/* Estilo para la caja de texto de daño multilínea */ +.sheet-rolltemplate-tirada_sombra div[style*="white-space: pre-wrap"] { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + font-family: 'Courier New', monospace; /* Opcional: estilo más "informe de combate" */ } \ No newline at end of file diff --git a/Comandos de guerra/Comandos.html b/Comandos de guerra/Comandos.html index 1a01ae9b35..a3728b8be1 100644 --- a/Comandos de guerra/Comandos.html +++ b/Comandos de guerra/Comandos.html @@ -1,1778 +1,1778 @@ -