/* Amber app - Estilo cotización/factura (naranja, negro, blanco) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
    --amber-orange: #e85d04;
    --amber-orange-light: #f48c06;
    --amber-black: #212529;
    --amber-dark: #1a1a1a;
    --amber-white: #fff;
    --amber-gray: #6c757d;
    --amber-bg: #f8f9fa;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--amber-bg); color: var(--amber-black); }

/* Login */
.login-page { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(135deg, var(--amber-orange) 0%, var(--amber-black) 100%); padding: 1rem; }
.login-wrap { background: var(--amber-white); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.2); padding: 2rem; width: 100%; max-width: 360px; }
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-brand .login-logo { width: 140px; height: auto; margin: 0 auto 0.75rem; display: block; }
.login-brand p { color: var(--amber-orange); font-size: 0.9rem; margin: 0; }
.login-form label { display: block; margin-bottom: 1rem; }
.login-form label span { display: block; font-size: 0.85rem; color: var(--amber-gray); margin-bottom: 0.25rem; }
.login-form input { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #dee2e6; border-radius: 6px; font-size: 1rem; }
.login-form input:focus { outline: none; border-color: var(--amber-orange); }
.login-form .btn { width: 100%; padding: 0.75rem; margin-top: 0.5rem; }
.login-footer { margin-top: 1.5rem; color: rgba(255,255,255,.9); font-size: 0.85rem; }

.alert { padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Layout app - sidebar vertical a la izquierda */
body.app-body { display: flex; min-height: 100vh; margin: 0; }
.app-header { width: 220px; min-width: 220px; background: var(--amber-black); color: var(--amber-white); display: flex; flex-direction: column; min-height: 100vh; }
.app-header .header-inner { padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; flex: 1; }
.app-header .brand { display: flex; align-items: center; font-weight: 600; }
.app-header .brand .brand-logo { height: 42px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.app-header nav { display: flex; flex-direction: column; gap: 0.25rem; }
.app-header nav a { color: rgba(255,255,255,.9); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.9rem; display: block; }
.app-header nav a:hover { background: rgba(255,255,255,.1); color: var(--amber-white); }
.app-header nav a.active { background: var(--amber-orange); color: var(--amber-white); }
.app-header .user { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.8); font-size: 0.85rem; }
.app-header .user a { color: var(--amber-orange-light); text-decoration: none; display: inline-block; margin-top: 0.25rem; }

.app-main { flex: 1; max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; box-sizing: border-box; }

/* Buttons */
.btn { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 0.9rem; cursor: pointer; text-decoration: none; font-family: inherit; }
.btn-primary { background: var(--amber-orange); color: var(--amber-white); }
.btn-primary:hover { background: #d34d03; }
.btn-secondary { background: var(--amber-gray); color: var(--amber-white); }
.btn-secondary:hover { background: #5a6268; }
.btn-outline { background: transparent; border: 1px solid var(--amber-orange); color: var(--amber-orange); }
.btn-outline:hover { background: var(--amber-orange); color: var(--amber-white); }
.btn-sm { padding: 0.35rem 0.6rem; font-size: 0.8rem; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--amber-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #dee2e6; }
th { background: var(--amber-black); color: var(--amber-white); font-weight: 600; font-size: 0.9rem; }
tr:hover { background: #f8f9fa; }
tr:last-child td { border-bottom: none; }

/* Cards */
.card { background: var(--amber-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 1.25rem; margin-bottom: 1rem; }
.card h2 { margin: 0 0 1rem; font-size: 1.25rem; color: var(--amber-black); }
.page-title { font-size: 1.5rem; margin: 0 0 1rem; color: var(--amber-black); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }

/* Form */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; color: var(--amber-black); }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #dee2e6; border-radius: 6px; font-size: 0.95rem; }
.form-group textarea { min-height: 80px; resize: vertical; }
.form-group .checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: normal; }
.form-group .checkbox-label input[type="checkbox"] { width: auto; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

/* Documento cotización / factura (diseño de la imagen) */
.doc-page { max-width: 800px; margin: 0 auto; background: var(--amber-white); min-height: 100vh; position: relative; box-shadow: 0 2px 12px rgba(0,0,0,.08); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.doc-header { position: relative; padding: 1.5rem 2rem 2rem; overflow: hidden; min-height: 100px; }
.doc-header::before { content: ''; position: absolute; top: 0; right: 0; width: 180px; height: 180px; background: linear-gradient(135deg, var(--amber-orange) 0%, var(--amber-orange) 40%, transparent 40%), linear-gradient(225deg, var(--amber-orange) 0%, transparent 50%); opacity: 0.9; }
.doc-header::after { content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 120px; background: var(--amber-black); transform: rotate(45deg) translate(40px, -30px); opacity: 0.6; }
.doc-header .inner { position: relative; z-index: 1; }
.doc-header .inner:first-of-type { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.doc-logo { display: flex; align-items: center; }
.doc-logo .doc-logo-img { height: 96px; width: auto; max-width: 360px; object-fit: contain; display: block; }
.doc-title { color: var(--amber-orange); font-size: 2rem; font-weight: 700; margin: 0.5rem 0 0; letter-spacing: -0.02em; }
.doc-meta { margin-top: 1rem; }
.doc-meta p { margin: 0.35rem 0; font-size: 0.95rem; color: var(--amber-black); }
.doc-meta .fecha { color: #c00; font-weight: 600; }
.doc-body { padding: 0 2rem 1.5rem; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.doc-table { width: 100%; border-collapse: collapse; margin: 1rem 0; border: 1px solid var(--amber-black); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.doc-table th { background: var(--amber-black); color: var(--amber-white); padding: 0.65rem 1rem; text-align: left; font-size: 0.9rem; font-weight: 700; border: 1px solid var(--amber-black); border-bottom-width: 2px; letter-spacing: 0.01em; }
.doc-table th:last-child { text-align: right; }
.doc-table td { padding: 0.85rem 1rem; border: 1px solid #333; vertical-align: top; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; color: var(--amber-black); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.doc-table td:first-child { font-weight: 700; }
.doc-table .precio { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.doc-table .precio .precio-us { font-size: 0.8em; font-weight: 600; vertical-align: top; }
.doc-table .precio .precio-num { font-size: 1.2em; font-weight: 700; }
.doc-table td .nota { font-size: 0.85rem; color: #c00; margin-top: 0.35rem; }
.doc-total { text-align: right; margin: 1.25rem 0; font-size: 1.05rem; }
.doc-total .total-label { font-weight: 700; margin-right: 0.5rem; }
.doc-total .total-val .precio-us { font-size: 0.85em; font-weight: 400; }
.doc-total .total-val .precio-num { font-size: 1.2em; font-weight: 700; }
.doc-signature { text-align: center; margin: 2.5rem 0; position: relative; }
.doc-signature .circle { position: relative; margin: 0 auto 0.5rem; min-height: 140px; max-width: 320px; background: url("../images/sinbg.png") center center no-repeat; background-size: contain; }
.doc-signature .circle .name { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 1.25rem; text-decoration: underline; color: var(--amber-black); text-shadow: 0 0 20px rgba(255,255,255,0.9), 0 1px 2px rgba(255,255,255,0.8); padding: 0.25rem 0; white-space: nowrap; }
.doc-footer { background: var(--amber-dark); color: var(--amber-white); padding: 1.25rem 2rem; position: relative; overflow: hidden; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.doc-footer::after { content: ''; position: absolute; bottom: 0; right: 0; width: 220px; height: 100%; background: linear-gradient(135deg, transparent 30%, var(--amber-orange) 30%, var(--amber-orange) 45%, transparent 45%), linear-gradient(225deg, var(--amber-black) 0%, var(--amber-orange) 40%); opacity: 0.35; }
.doc-footer .inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.doc-footer .inner .contact-label { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 0.15rem; }
.doc-footer .inner .contact-phone { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.4rem 0.75rem; background: rgba(255,255,255,0.08); border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); }
.doc-footer .inner .contact-phone::before { content: ''; display: inline-block; width: 20px; height: 20px; min-width: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f48c06'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.doc-footer .inner .contact-web { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.52rem; font-weight: 600; color: var(--amber-orange-light); text-decoration: none; margin-top: 0.5rem; margin-left: auto; padding: 0.35rem 0; border-bottom: 1px solid rgba(244,140,6,0.4); transition: color 0.2s; }
.doc-footer .inner .contact-web:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
@media print { .no-print { display: none !important; } .app-header { display: none !important; } .doc-page { box-shadow: none; } body { background: white; } .app-body { display: block; } .app-main { max-width: none; } }