:root{
      --primary:#2563eb; --primary-600:#1d4ed8;
      --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
      --bg:#f7f9fc; --muted:#e5e7eb; --ink:#1f2937; --ink-2:#374151; --ink-3:#6b7280;
      --radius:12px; --shadow:0 8px 24px rgba(0,0,0,.08);
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);}
    header{max-width:1200px;margin:0 auto;padding:1rem 1rem 0;}
    main{max-width:1200px;margin:0 auto;padding:1rem}
    h1{font-size:clamp(1.25rem,1.6vw+1rem,1.8rem);margin:.25rem 0 1rem}

    /* Tarjetas y layout */
    .card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;margin:1rem 0}
    .row{display:flex;flex-wrap:wrap;gap:.75rem}
    .spacer{flex:1}

    /* Botones */
    .btn{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:10px;padding:.6rem .9rem;font-weight:600;background:#fff;color:var(--ink-2);box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px var(--muted);cursor:pointer;transition:filter .15s,transform .04s}
    .btn:active{transform:translateY(1px)}
    .btn.primary{background:var(--primary);color:#fff;box-shadow:none}
    .btn.primary:hover{filter:brightness(.98)}
    .btn.success{background:var(--success);color:#fff;box-shadow:none}
    .btn.warning{background:var(--warning);color:#111827;box-shadow:none}
    .btn.danger{background:var(--danger);color:#fff;box-shadow:none}
    .btn[disabled]{opacity:.55;cursor:not-allowed}

    /* Inputs */
    .input{width:100%;padding:.6rem .7rem;border:1px solid var(--muted);border-radius:10px;background:#fff}
    label{font-size:.9rem;color:var(--ink-3)}

    /* Tabs */
    #main-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 1rem}
    .tab{background:#fff;border:1px solid var(--muted);border-radius:999px;padding:.45rem .9rem;cursor:pointer}
    .tab[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:#fff}

    /* Tabla */
    .table-wrap{overflow:auto}
    table{width:100%;border-collapse:collapse}
    th,td{padding:.7rem .6rem;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
    thead th{font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;white-space:nowrap}
    tr:hover td{background:#fafafa}
    .actions{display:flex;flex-wrap:wrap;gap:.35rem}

    /* Modal */
    .modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,6,23,.45);opacity:0;visibility:hidden;transition:opacity .18s;z-index:50}
    .modal.open{opacity:1;visibility:visible}
    .sheet{width:min(920px,92vw);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:var(--shadow)}
    .sheet header{display:flex;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid #eee}
    .sheet .body{padding:1rem}
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:.8rem}
    .col-6{grid-column:span 6}
    .col-12{grid-column:span 12}

    /* Toast */
    #toasts{position:fixed;right:18px;top:18px;display:grid;gap:.5rem;z-index:60}
    .toast{padding:.7rem .9rem;color:#fff;border-radius:10px;box-shadow:var(--shadow);animation:slideIn .25s ease-out}
    .toast.success{background:var(--success)}
    .toast.error{background:var(--danger)}
    @keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

    /* Chips y etiquetas */
    .chip{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;font-weight:600}
    .chip.blue{background:#e0e7ff;color:#1e3a8a}
    .chip.green{background:#d1fae5;color:#065f46}
    .chip.orange{background:#ffedd5;color:#9a3412}

    /* Panel historial más amigable */
    .panel{background:linear-gradient(180deg,#ffffff, #f8fafc);border:1px solid #e5e7eb;border-radius:12px;padding:1rem}
    .timeline-item{display:grid;grid-template-columns:120px 1fr;gap:.5rem;padding:.45rem 0;border-bottom:1px dashed #e5e7eb}
    .tdate{font-weight:700;color:#334155}
    .ttype{font-weight:700}
    .t-Nacimiento{color:#1d4ed8}
    .t-Empadre,.t-Preñez{color:#7c3aed}
    .t-Parto{color:#0f766e}
    .t-Esquila{color:#ea580c}
    .t-Transferencia,.t-Mortalidad{color:#b91c1c}

    /* Paginación y carrito */
    .pager{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-top:.6rem}
    .pager button{border:1px solid var(--muted);background:#fff;border-radius:8px;padding:.35rem .6rem;cursor:pointer}
    .pager .active{background:var(--primary);border-color:var(--primary);color:#fff}
    .cart{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border-radius:999px;background:#eef2ff;color:#1e40af;font-weight:700}

    /* Fotos */
    .fotolist{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
    .badge{border:1px solid #111;border-radius:10px;height:auto;padding:.5rem;display:grid;grid-template-rows:auto auto 1fr auto;gap:.4rem}
    .badge h3{margin:0;padding:.35rem;border-radius:8px;background:#111827;color:#fff;text-align:center;font-size:1rem}
    .badge .kv{font-size:.88rem;display:grid;gap:.25rem}
    .badge img{width:100%;height:auto;border-radius:8px}

    @media (max-width:768px){.col-6{grid-column:span 12}}
    @media print{header,.no-print{display:none!important}.card{box-shadow:none;border:1px solid #ddd}}