:root {
    --azul: #1d4ed8;
    --verde: #16a34a;
    --rojo: #dc2626;
    --ambar: #d97706;
    --gris: #6b7280;
    --fondo: #f3f4f6;
    --borde: #d1d5db;
    --texto: #111827;
    --crema: #c8a45c;
    --crema-fondo: #f6efdd;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--texto);
}

a { color: var(--azul); text-decoration: none; }

/* Barra superior */
.barra-superior {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    background: #fff;
    border-bottom: 1px solid var(--borde);
    padding: 0.5rem 0.9rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.marca { display: flex; align-items: center; }
.marca img { height: 20px; width: auto; display: block; }

/* Menu en la fila superior: chips con icono + etiqueta */
.menu { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1; }
.menu a {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.55rem; border-radius: 999px; font-size: 0.8rem;
    color: var(--texto); text-decoration: none; background: var(--fondo);
    white-space: nowrap;
}
.menu a svg { width: 14px; height: 14px; flex: none; color: var(--crema); }
.menu a:hover { background: #e5e7eb; }

.usuario-actual { flex: none; font-size: 0.8rem; color: var(--gris); }
.salir { flex: none; }
.salir button {
    display: flex; align-items: center; gap: 0.35rem;
    background: none; border: 1px solid var(--borde); border-radius: 999px;
    padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.8rem; color: var(--texto);
}
.salir button svg { width: 14px; height: 14px; }

.contenido { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.contenido.ancho-completo { max-width: none; }
.contenido h1 { font-size: 1.3rem; margin: 0 0 1rem; }
.contenido h2 { font-size: 1.05rem; margin: 1.2rem 0 0.6rem; }

/* Mensajes */
.mensajes { list-style: none; padding: 0; margin: 0 0 1rem; }
.mensaje { padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 0.4rem; }
.mensaje-success { background: #dcfce7; color: #166534; }
.mensaje-error { background: #fee2e2; color: #991b1b; }
.mensaje-info { background: #dbeafe; color: #1e40af; }
.mensaje-warning { background: #fef3c7; color: #92400e; }

/* Tarjetas KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; margin-bottom: 1.1rem; }
.kpi {
    display: flex; align-items: center; gap: 0.6rem;
    background: #fff; border: 1px solid var(--borde); border-left: 3px solid var(--azul);
    border-radius: 8px; padding: 0.55rem 0.7rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}
.kpi-icono {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(29, 78, 216, 0.1); color: var(--azul);
}
.kpi-icono svg { width: 15px; height: 15px; }
.kpi .valor { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.kpi .etiqueta { color: var(--gris); font-size: 0.72rem; }
.kpi-ventas { border-left-color: var(--azul); }
.kpi-ventas .kpi-icono { background: rgba(29, 78, 216, 0.1); color: var(--azul); }
.kpi-costes { border-left-color: var(--rojo); }
.kpi-costes .kpi-icono { background: rgba(220, 38, 38, 0.1); color: var(--rojo); }
.kpi-beneficio.positivo { border-left-color: var(--verde); }
.kpi-beneficio.positivo .kpi-icono { background: rgba(22, 163, 74, 0.12); color: var(--verde); }
.kpi-beneficio.negativo { border-left-color: var(--rojo); }
.kpi-beneficio.negativo .kpi-icono { background: rgba(220, 38, 38, 0.1); color: var(--rojo); }
.kpi-margen { border-left-color: var(--ambar); }
.kpi-margen .kpi-icono { background: rgba(217, 119, 6, 0.12); color: var(--ambar); }
.valor-positivo { color: var(--verde); }

/* Tarjetas de obra (listado de Obras) */
.tarjetas-obras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; margin-bottom: 1.1rem; }
.tarjeta-obra {
    display: flex; flex-direction: column; gap: 0.45rem;
    background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--borde);
    border-radius: 8px; padding: 0.8rem 1rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    text-decoration: none; color: inherit;
}
.tarjeta-obra-cabecera { display: flex; align-items: center; gap: 0.45rem; }
.tarjeta-obra-punto { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.tarjeta-obra-nombre { font-weight: 700; font-size: 0.95rem; color: var(--texto); }
.tarjeta-obra-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--gris); font-size: 0.8rem; }
.tarjeta-obra-cifras { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--texto); }
.tarjeta-obra-horas { font-size: 0.78rem; color: var(--gris); }
.valor-negativo { color: var(--rojo); }

/* Tarjetas de seccion (agrupan graficos, listas...) */
.tarjeta {
    background: #fff; border: 1px solid var(--borde); border-radius: 8px;
    padding: 0.8rem; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}
.seccion-titulo {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 700; margin: 0 0 0.6rem;
}
.seccion-titulo svg { width: 14px; height: 14px; color: var(--gris); flex: none; }
.paneles-grafico {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem; margin-bottom: 1.1rem;
}
.grafico-caja { position: relative; height: 160px; }

/* Lista de tareas pendientes como tarjetas, no tabla plana */
.lista-tareas { display: flex; flex-direction: column; gap: 0.35rem; max-height: 190px; overflow-y: auto; }
.tarea-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    padding: 0.35rem 0.6rem; border: 1px solid var(--borde); border-left: 3px solid var(--ambar);
    border-radius: 6px; background: #fffbeb; font-size: 0.85rem;
}
.tarea-item .tarea-obra { font-size: 0.72rem; color: var(--gris); text-transform: uppercase; white-space: nowrap; }
.estado-vacio { color: var(--gris); font-style: italic; padding: 0.3rem 0; font-size: 0.85rem; }

/* Ranking de obras con mini barra de progreso */
.fila-obra {
    display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem;
    align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--borde); font-size: 0.85rem;
}
.fila-obra:last-child { border-bottom: none; }
.fila-obra .fila-obra-nombre { font-weight: 600; }
.fila-obra .fila-obra-cifras { text-align: right; font-size: 0.78rem; color: var(--gris); }
.fila-obra .barra-progreso { grid-column: 1 / -1; }

/* Tablas */
.tabla-wrap { overflow-x: auto; }
table.datos { width: 100%; border-collapse: collapse; background: #fff; }
table.datos th, table.datos td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--borde); text-align: left; }
table.datos th { background: #f9fafb; font-size: 0.85rem; text-transform: uppercase; color: var(--gris); }
table.datos tbody tr:hover { background: #f9fafb; }

/* Botones */
.btn {
    display: inline-block; background: var(--azul); color: #fff; border: none;
    border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.95rem;
}
.btn-ok { background: var(--verde); }
.btn-peligro { background: var(--rojo); }
.btn-secundario { background: #fff; color: var(--texto); border: 1px solid var(--borde); }
.btn-pequeno { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

/* Distintivos de estado */
.estado-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.e-borrador, .e-pendiente_cierre { background: #e5e7eb; color: #374151; }
.e-cerrado, .e-cerrada, .e-enviado, .e-emitida, .e-presupuestada, .e-obra_cerrada { background: #dbeafe; color: #1e40af; }
.e-aceptado, .e-pagada, .e-resuelta, .e-facturado, .e-activa, .e-aprobado, .e-convertida { background: #dcfce7; color: #166534; }
.e-rechazado, .e-anulada, .e-descartada { background: #fee2e2; color: #991b1b; }
.e-pendiente_facturar, .e-abierta, .e-pendiente { background: #fef3c7; color: #92400e; }

/* Formularios */
form p { margin: 0.6rem 0; }
label { display: block; font-weight: 600; margin-bottom: 0.2rem; font-size: 0.9rem; }
input, select, textarea {
    width: 100%; padding: 0.45rem; border: 1px solid var(--borde); border-radius: 6px; font-size: 0.95rem;
}

/* Firma tactil */
canvas#firma { border: 1px solid var(--borde); border-radius: 6px; touch-action: none; width: 100%; max-width: 500px; height: 200px; background: #fff; }

/* Barra de progreso presupuesto/ejecutado */
.barra-progreso { background: #e5e7eb; border-radius: 999px; height: 8px; overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; background: var(--azul); }
.barra-progreso > span.aviso { background: var(--ambar); }
.barra-progreso > span.excedido { background: var(--rojo); }

/* Calendario de programacion de trabajos (panel) */
.calendario-wrap { overflow-x: hidden; }
table.calendario { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.calendario th { padding: 0.3rem; font-size: 0.72rem; color: var(--gris); text-align: center; font-weight: 600; }
table.calendario td { border: 1px solid var(--borde); vertical-align: top; min-height: 62px; padding: 0.25rem; font-size: 0.7rem; }
table.calendario td.dia-vacio { background: var(--fondo); }
table.calendario td.dia-hoy { background: rgba(29, 78, 216, 0.06); border-color: var(--azul); }
.dia-numero-fila { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.2rem; }
.dia-numero { font-weight: 600; font-size: 0.72rem; color: var(--gris); }
.dia-hoy .dia-numero { color: var(--azul); }
.dia-anadir {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px; background: var(--fondo);
    color: var(--gris); font-size: 0.75rem; line-height: 1; text-decoration: none;
}
/* El recuadro visible es pequeno para no ocupar la celda, pero el area
   tocable real es mas grande (min. recomendado en movil), con este pseudo-
   elemento invisible que la amplia sin cambiar el tamano en pantalla. */
.dia-anadir::before {
    content: ''; position: absolute; inset: -13px;
}
.dia-anadir:hover { background: var(--azul); color: #fff; }
.dia-parte-chip {
    display: block; background: var(--crema-fondo); color: var(--texto);
    border-radius: 4px; padding: 0.05rem 0.3rem; margin-bottom: 0.15rem;
    font-size: 0.65rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dia-parte-chip-calendar {
    background: #dbeafe; color: var(--azul);
}
.dia-parte-chip-parte {
    background: #dcfce7; color: var(--verde);
}

@media (max-width: 640px) {
    .barra-superior { flex-direction: column; align-items: flex-start; }
    .menu { gap: 0.5rem; }
    .kpis { grid-template-columns: 1fr 1fr; }
    table.calendario th { padding: 0.15rem; font-size: 0.6rem; }
    table.calendario td { min-height: 48px; padding: 0.12rem; font-size: 0.58rem; }
    .dia-numero { font-size: 0.62rem; }
    .dia-parte-chip { font-size: 0.55rem; padding: 0.02rem 0.15rem; }
}