/* Las fuentes se cargan desde el en el de cada página (no con
@import aquí) -- un @import de Google Fonts dentro del CSS obliga al
navegador a esperar a descargar y leer TODO este archivo antes de recién
enterarse de que necesita la fuente, así que la pide después y en serie.
Con el en el HTML, el navegador la pide en paralelo desde el
principio, y la página carga notoriamente más rápido. */
/* Paleta de marca (Fase 23): el naranjo es el mismo de tu logo (#D44F35,
sacado directo de los archivos vectoriales que mandaste), con negro
cálido de contraste -- lo elegimos por sobre azul porque tu propio kit
de marca ya trae una versión del isotipo en negro (y ninguna en azul),
así que queda consistente con lo que ya usan en redes/imprenta -- más
el salmón y el papel crema que también vienen en tu manual de marca.
El verde se mantiene aparte, como color semántico (bien/pagado/a
tiempo), separado del naranjo de marca para que no se confundan.
Rediseño (Fase 27): se mantiene este mismo naranjo -- ya está aprobado
y en vivo, no hay ningún motivo para cambiarlo -- pero se suma un
sistema tipográfico más editorial (Fraunces para títulos, IBM Plex Sans
para el cuerpo, IBM Plex Mono para números en tablas/montos) y tarjetas
con una sombra suave en vez de solo un borde plano, para que la app se
vea más cuidada sin tocar ningún color ni comportamiento. */
:root {
--accent: #D44F35;
--accent-dark: #A83A25;
--accent-light: #FBEAE3;
--ink: #211C19;
--ink-soft: #4A423C;
--salmon: #F2A699;
--salmon-wash: #FCEEEA;
--paper: #F7F1E7;
--text: #2b2b2b;
--muted: #6b6b6b;
--border: #e5ddd2;
--bg: #FBF8F2;
--white: #ffffff;
--green: #3E7A4B;
--area-admin: #FBE3D6;
--area-texto: #D6E4F0;
--area-ilustracion: #E8D9F0;
--area-diseno: #D9F0E1;
--area-produccion: #F0EBD9;
--area-distribucion: #F0D9DC;
/* Mismos tonos que arriba pero más saturados -- se usan en las barras de
la Carta Gantt, donde el color pálido de las etiquetas no se ve bien
rellenando una barra sobre el track claro. */
--area-admin-fuerte: #E8A87C;
--area-texto-fuerte: #7FA9CC;
--area-ilustracion-fuerte: #B58ED1;
--area-diseno-fuerte: #6FBE93;
--area-produccion-fuerte: #C9AF5E;
--area-distribucion-fuerte: #D98A9A;
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Calibri, Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--shadow: 0 1px 2px rgba(33,28,25,0.05), 0 6px 16px rgba(33,28,25,0.07);
--shadow-sm: 0 1px 2px rgba(33,28,25,0.06);
--radius: 14px;
--radius-sm: 8px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
}
h1, h2, h3, .brand, .page-title h1, .card h2 { font-family: var(--font-display); text-wrap: balance; }
header.topbar {
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Permanente al hacer scroll en la ficha de proyecto: "← Volver", el título
con sus datos (autor/ingreso/cierre/encargada) y las pestañas, para no
perderlos de vista al bajar en una ficha larga (a pedido de Mai, con
captura de referencia -- lo que debe quedar fijo es este bloque, no la
barra superior con "+ Nuevo proyecto"/"Cerrar sesión"). El fondo cubre el
contenido que pasa por debajo al hacer scroll. */
.ficha-header-fijo {
position: sticky;
top: 0;
z-index: 15;
background: var(--bg);
padding-top: 6px;
}
header.topbar .brand {
font-weight: 700;
color: var(--accent);
font-size: 18px;
text-decoration: none;
}
header.topbar nav a,
header.topbar .topbar-right a {
color: var(--text);
text-decoration: none;
margin-left: 18px;
font-size: 14px;
}
header.topbar nav a:hover,
header.topbar .topbar-right a:hover { color: var(--accent); }
.topbar-right { display: flex; align-items: center; }
main {
max-width: 1100px;
margin: 0 auto;
padding: 28px 20px 60px;
}
/* ------------------------------------------------------------ Menú lateral */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
/* El lateral usa el negro cálido de la marca en vez de blanco -- es lo que
más contraste real le da al naranjo (a diferencia de solo cambiar el
acento y dejar todo lo demás igual de blanco). */
.sidebar {
width: 216px;
flex-shrink: 0;
background: var(--ink);
border-right: 1px solid var(--ink);
padding: 20px 0;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar .brand {
display: block;
padding: 0 20px 18px;
font-weight: 800;
color: var(--accent);
font-size: 18px;
letter-spacing: 0.01em;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.12);
margin-bottom: 10px;
}
.sidebar-nav { display: flex; flex-direction: column; }
.sidebar-nav a {
padding: 11px 20px;
color: #EAE2D6;
text-decoration: none;
font-size: 14px;
border-left: 3px solid transparent;
}
.sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.sidebar-nav a.activo {
background: rgba(212,79,53,0.18);
color: var(--white);
border-left-color: var(--accent);
font-weight: 600;
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 860px) {
.app-shell { flex-direction: column; }
.sidebar {
width: 100%;
height: auto;
position: static;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding: 8px 10px;
}
.sidebar .brand { border-bottom: none; padding: 8px 14px 8px 4px; margin-bottom: 0; }
.sidebar-nav { flex-direction: row; flex-wrap: wrap; }
.sidebar-nav a { border-left: none; border-bottom: 3px solid transparent; padding: 8px 12px; }
.sidebar-nav a.activo { border-left: none; border-bottom-color: var(--accent); }
}
.login-shell {
max-width: 380px;
margin: 90px auto;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 32px;
text-align: center;
}
.login-shell h1 {
color: var(--accent);
font-size: 22px;
margin-bottom: 4px;
}
.login-shell p.sub { color: var(--muted); font-size: 14px; margin-top: 0; }
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 15px;
margin-bottom: 12px;
font-family: inherit;
}
button, .btn {
background: var(--accent);
color: white;
border: none;
padding: 10px 18px;
border-radius: var(--radius-sm);
font-size: 14px;
font-family: inherit;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: opacity 0.15s, transform 0.1s;
}
button:hover, .btn:hover { opacity: 0.9; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
background: var(--white);
color: var(--accent);
border: 1px solid var(--accent);
}
.error-msg { color: #B0392B; font-size: 13px; margin: -4px 0 12px; }
.hint-msg { color: var(--muted); font-size: 12px; margin-top: 10px; }
.page-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.page-title-texto { flex: 1 1 auto; min-width: 0; }
.page-title h1 { font-size: 22px; color: var(--accent); margin: 0; }
.ficha-subtitulo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
margin-top: 5px;
font-size: 13px;
color: var(--muted);
}
.ficha-subtitulo .atraso-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
background: #F6DCD8;
color: #8a2f22;
font-weight: 600;
font-size: 12px;
}
.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filters select, .filters input {
padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit;
}
table.proyectos {
width: 100%;
border-collapse: collapse;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
table.proyectos th {
background: var(--accent);
color: white;
text-align: left;
padding: 10px 12px;
font-size: 13px;
}
table.proyectos td {
padding: 10px 12px;
border-top: 1px solid var(--border);
font-size: 14px;
}
table.proyectos tr:hover { background: var(--accent-light); cursor: pointer; }
/* Base de proyectos: la columna Rentabilidad se esconde para quien no
tiene acceso contable (Dirección/Coordinación únicamente). */
.sin-rentabilidad .col-rentabilidad { display: none; }
.th-ordenable:hover { background: var(--accent-dark); }
.orden-flecha { font-size: 10px; }
.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
/* El ícono ⚠ y el texto no deben separarse en dos líneas dentro de la
etiqueta -- antes no tenía white-space, así que en columnas angostas el
texto se envolvía y quedaba raro. */
white-space: nowrap;
}
.badge-activo { background: #D9F0E1; color: #245c34; }
.badge-pausado { background: #F0EBD9; color: #6b5a1c; }
.badge-cerrado { background: #e2ddd9; color: #555; }
.badge-anulado { background: #F0D9DC; color: #8a2f3d; }
.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 20px;
}
.card h2 { font-size: 16px; color: var(--accent); margin-top: 0; }
.field-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 20px;
}
.field-grid label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
.field-grid input, .field-grid select, .field-grid textarea {
width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
}
.etapa-row {
display: grid;
/* La columna del botón "Nota" (penúltima) queda más ancha que ✎/✕ --
antes las tres compartían 30px y la palabra "Nota" se salía del botón. */
grid-template-columns: 18px 24px minmax(150px, 1fr) 100px 106px 122px 30px 48px 30px;
align-items: center;
gap: 8px 10px;
padding: 10px 10px;
border-bottom: 1px solid var(--border);
}
.etapa-row:last-child { border-bottom: none; }
.etapa-num { color: var(--muted); font-size: 12px; }
.etapa-nombre { font-size: 14px; }
.etapa-nombre.hecho { color: var(--muted); }
.etapa-area { justify-self: start; }
/* La lista de colaboradores externos reutiliza .etapa-row para el mismo
look de fila con borde, pero con solo 2 columnas (nombre + botón) —
necesita su propio layout en vez de la grilla de las etapas. */
.colab-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.colab-row .etapa-nombre { flex: 1; }
.etapa-area {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
white-space: nowrap;
}
.area-Administración { background: var(--area-admin); }
.area-Texto { background: var(--area-texto); }
.area-Ilustración { background: var(--area-ilustracion); }
.area-Diseño { background: var(--area-diseno); }
.area-Producción { background: var(--area-produccion); }
.area-Distribución { background: var(--area-distribucion); }
.etapa-area-select {
font-size: 11px;
padding: 3px 6px;
border-radius: 999px;
border: none;
max-width: 100%;
font-weight: 600;
}
.etapa-estado, .etapa-responsable {
font-size: 12px;
padding: 5px 8px;
border-radius: 6px;
border: 1px solid var(--border);
max-width: 100%;
}
/* Color de fondo de la fila según estado -- a pedido de Mai, para ver de un
vistazo cómo va todo el proyecto. Tonos cálidos y apagados (no colores
brillantes/saturados) con texto en un blanco roto, no un blanco puro que
resulte estridente sobre el color. */
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) {
border-radius: 8px;
padding: 10px 10px;
margin-bottom: 3px;
border-bottom: none;
color: #FAF6EF;
}
.etapa-color-hecho { background: #7E9370; }
.etapa-color-atrasada { background: #AE5B47; }
.etapa-color-en-plazo { background: #B08A3E; }
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-nombre { color: #FAF6EF; }
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-nombre.hecho { color: rgba(250, 246, 239, 0.8); }
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-num { color: rgba(250, 246, 239, 0.75); }
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-plazo-linea { color: rgba(250, 246, 239, 0.9); }
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-plazo-original { background: rgba(255, 255, 255, 0.18); color: #FAF6EF; }
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-orden-botones button,
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-icono-btn {
color: rgba(250, 246, 239, 0.85);
border-color: rgba(250, 246, 239, 0.5);
background: rgba(255, 255, 255, 0.12);
}
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-icono-btn:hover,
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-orden-botones button:hover {
color: #FAF6EF;
border-color: #FAF6EF;
}
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-icono-btn.tiene-nota { color: #FAF6EF; border-color: #FAF6EF; }
:is(.etapa-color-hecho, .etapa-color-atrasada, .etapa-color-en-plazo) .etapa-nota-texto { color: var(--text); }
.empty-state { text-align: center; color: var(--muted); padding: 40px 0; }
.loading { text-align: center; color: var(--muted); padding: 30px 0; }
.top-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; align-items: center; }
.toggle-group { display: flex; gap: 14px; padding-top: 6px; }
.toggle-option { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.toggle-option input { margin: 0; }
/* Un checkbox dentro de .field-grid heredaba width:100%/padding de
".field-grid input" (misma especificidad, esa regla queda declarada
después) -- eso estiraba la caja del checkbox a todo el ancho de la
celda y empujaba su label bien lejos a la derecha, como si "Depósito
legal hecho" no tuviera relación con su casillero. Se anula acá con
más especificidad. */
.field-grid .toggle-option input[type="checkbox"] { width: auto; padding: 0; }
.field-grid .toggle-option label { display: inline; margin-bottom: 0; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab-btn {
background: none; color: var(--muted); border: none; border-radius: 0;
padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tab-btn:hover { opacity: 1; color: var(--accent); }
.tab-btn.activo { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.activo { display: block; }
.kpi-areas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.kpi-area-row { display: flex; align-items: center; justify-content: space-between; max-width: 320px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; }
.kpi-area-row strong { font-size: 16px; }
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.kpi-box { background: var(--accent-light); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-box strong { font-size: 38px; color: var(--accent); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.kpi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-clicable { cursor: pointer; border: 2px solid transparent; text-align: left; }
.kpi-clicable:hover { border-color: var(--accent); }
.kpi-clicable.kpi-activo { border-color: var(--accent-dark); }
.kpi-box.kpi-alerta { background: #AE5B47; }
.kpi-box.kpi-alerta strong, .kpi-box.kpi-alerta span.hint-msg { color: #FAF6EF; }
.kpi-detalle { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); } }
.etapas-semana-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.semana-grupo { margin-bottom: 18px; }
.semana-grupo:last-child { margin-bottom: 0; }
.subtitulo-etapas { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; }
@media (max-width: 640px) {
.kpi-grid, .etapas-semana-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
/* En pantallas angostas la fila de etapas no cabe con sus 8 columnas —
dejamos que se desplace de lado en vez de amontonarse. */
#etapas-lista { overflow-x: auto; }
.etapa-row { min-width: 640px; }
}
.resumen-rentabilidad { display: flex; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.resumen-rentabilidad .resumen-item { background: var(--accent-light); border-radius: var(--radius-sm); padding: 10px 16px; min-width: 160px; }
.resumen-rentabilidad .resumen-item strong { display: block; font-size: 18px; margin-top: 2px; color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.movimientos { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; font-size: 13px; }
table.movimientos th { background: var(--accent-light); color: var(--accent); text-align: left; padding: 8px 10px; font-size: 12px; }
table.movimientos td { padding: 8px 10px; border-top: 1px solid var(--border); }
.badge-pendiente { background: #F0EBD9; color: #6b5a1c; }
.badge-pagado { background: #D9F0E1; color: #245c34; }
.badge-vencido { background: #AE5B47; color: #FAF6EF; font-weight: 700; }
.badge-en-plazo { background: #D9F0E1; color: #245c34; }
.badge-proximo-vencer { background: #AE5B47; color: #FAF6EF; font-weight: 700; }
/* Alarmas de Contabilidad -- a pedido de Mai, algo más visible que solo el
número en rojo/verde para lo que de verdad necesita atención: rentabilidad
negativa o pagos/cobros que ya pasaron su fecha sin marcarse "Pagado". */
.resumen-item-alerta { background: #F6DCD8; border: 1px solid #B0392B; }
.resumen-item-alerta strong { color: #8a2f22 !important; }
.fila-atrasada { background: #F6DCD8; }
.fila-atrasada td { color: #8a2f22; }
.texto-vencido { color: #8a2f22; font-weight: 600; }
.etapa-orden-botones { display: flex; flex-direction: column; gap: 0; }
.etapa-orden-botones button {
background: none; border: none; color: var(--muted); padding: 0 4px; font-size: 11px; line-height: 1.1; cursor: pointer;
}
.etapa-orden-botones button:hover { color: var(--accent); }
.etapa-orden-botones button:disabled { opacity: 0.25; cursor: default; }
.etapa-icono-btn {
background: none; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm);
padding: 4px 8px; font-size: 13px; cursor: pointer;
}
.etapa-icono-btn:hover { color: var(--accent); border-color: var(--accent); }
.etapa-icono-btn.tiene-nota { color: var(--accent); border-color: var(--accent); }
.etapa-nota-texto {
grid-column: 1 / -1; font-size: 12px; color: var(--muted); background: var(--accent-light);
padding: 6px 10px; border-radius: 6px; margin-top: 6px; white-space: pre-line;
}
.progreso-wrap { margin-bottom: 14px; }
.progreso-texto { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.progreso-barra { width: 100%; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.progreso-relleno { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s; }
.progreso-mini { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.progreso-mini .progreso-barra { width: 70px; }
.progreso-mini span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.etapa-plazo-linea { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.etapa-plazo-label { display: flex; align-items: center; gap: 4px; }
.etapa-plazo-label input[type="date"] { font-size: 12px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px; }
.etapa-plazo-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.etapa-plazo-badge.a-tiempo { background: #D9F0E1; color: #245c34; }
.etapa-plazo-badge.atrasada { background: #F6DCD8; color: #8a2f22; }
.etapa-plazo-badge.sin-plazo { background: var(--border); color: var(--muted); }
.etapa-plazo-original { font-size: 11px; color: var(--muted); background: var(--border); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
/* Carta Gantt (dentro de cada proyecto) */
.gantt-wrap { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.gantt-fila { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 3px 0; }
/* Dos líneas: arriba área + etapa, abajo el proyecto -- antes iba todo en
una sola línea con ellipsis y el texto quedaba cortado/ilegible. */
.gantt-etiqueta { width: 240px; flex-shrink: 0; font-size: 13px; display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.3; }
.gantt-etiqueta-linea1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gantt-etiqueta-linea2 { font-size: 12px; color: var(--muted); text-decoration: none; display: block; overflow-wrap: break-word; }
.gantt-etiqueta-linea2:hover { color: var(--accent); text-decoration: underline; }
.gantt-track { position: relative; flex: 1; min-width: 360px; height: 20px; background: var(--accent-light); border-radius: 4px; }
.gantt-barra { position: absolute; top: 2px; height: 16px; border-radius: 4px; }
/* Color por área de producción (a pedido de Mai, para no repetir los mismos
verde/rojo que ya se usan para "estados" en otras partes de la app).
Las etapas atrasadas se distinguen con un borde rojo, no con un color de
relleno distinto, para no perder esa información. */
.gantt-barra.area-Administración { background: var(--area-admin-fuerte); }
.gantt-barra.area-Texto { background: var(--area-texto-fuerte); }
.gantt-barra.area-Ilustración { background: var(--area-ilustracion-fuerte); }
.gantt-barra.area-Diseño { background: var(--area-diseno-fuerte); }
.gantt-barra.area-Producción { background: var(--area-produccion-fuerte); }
.gantt-barra.area-Distribución { background: var(--area-distribucion-fuerte); }
.gantt-barra.sin-plazo { background: var(--border); }
.gantt-barra.gantt-pendiente { opacity: 0.55; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0 4px, transparent 4px 8px); }
.gantt-barra.gantt-atrasada { outline: 2px solid #B0392B; outline-offset: 0; }
.gantt-hoy-linea { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--accent); z-index: 2; }
.gantt-eje-fila { display: flex; align-items: center; gap: 10px; min-height: 18px; margin-bottom: 2px; }
.gantt-eje-spacer { width: 240px; flex-shrink: 0; }
.gantt-eje { position: relative; flex: 1; min-width: 360px; height: 16px; border-bottom: 1px solid var(--border); }
.gantt-eje-marca { position: absolute; bottom: 3px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.gantt-eje-marca::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 1px; height: 4px; background: var(--border); }
/* A pedido de Mai: en "Mi carta Gantt" (la lista combinada de todos sus
proyectos, más larga que la de un solo proyecto) las fechas del eje se
perdían de vista al bajar. Se deja fijo solo en esa vista (clase
.gantt-standalone, puesta en carta-gantt.html) -- en la carta Gantt de
una ficha de proyecto no hace falta porque ya es una lista corta y
convive con el encabezado fijo de la ficha. */
.gantt-standalone .gantt-eje-fila {
position: sticky;
top: 0;
z-index: 5;
background: var(--white);
padding-top: 4px;
}
@media (max-width: 720px) { .gantt-etiqueta { width: 140px; } .gantt-eje-spacer { width: 140px; } }
/* Fila de tarea en Inicio ("Tus tareas pendientes y por vencer") -- tiene su
propia clase para no compartir el grid de 9 columnas de .etapa-row (esa es
para las filas de Producción dentro de un proyecto, con más botones). */
.tarea-inicio-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tarea-inicio-row:last-child { border-bottom: none; }
.tarea-inicio-nombre { flex: 1; min-width: 160px; font-size: 14px; }
.tarea-inicio-fecha { white-space: nowrap; margin-top: 0; }
.checklist-grupo { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.checklist-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.checklist-item input { margin-top: 3px; }
.checklist-item.oculto { display: none; }
.canales-distribucion { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.timeline-item {
display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-fecha { font-size: 12px; color: var(--muted); width: 88px; flex-shrink: 0; padding-top: 6px; }
.timeline-fecha.vencida { color: #B0392B; font-weight: 600; }
.timeline-cuerpo { flex: 1; }
.timeline-cuerpo a { color: var(--text); text-decoration: none; font-weight: 600; }
.timeline-cuerpo a:hover { color: var(--accent); }
.crud-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.crud-form > div { display: flex; flex-direction: column; gap: 4px; }
.crud-form label { font-size: 12px; color: var(--muted); }
/* margin:0 pisa el "margin-bottom:12px" de la regla global input[type="text"]
(pensada para inputs sueltos, uno debajo del otro) -- sin esto, el campo
"Nombre" quedaba más alto que "Tipo" (que al ser un